Avisos
Vaciar todo

Ajustar Logo al Ancho de página en pack webempresa Atlas

28 Respuestas
3 Usuarios
0 Reactions
717 Visitas
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Buenas a todos,

Tego instalado el Pack Atlas y me gustaria que el logotipo que tego puesto se ajuste al ancho de la pantalla.

No se si lo tengo que hacer por medio de Css y si es asin que poner y donde....

Muchas gracias por todo

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 10/07/2017 6:28 pm
Jhon
 Jhon
Respuestas: 44989
Soporte CMS Webempresa
 

Hola

Sería mejor que evalúes colocar el logo como tal, la imagen que envías es una foto, te lo comento porque te causará problemas en modo responsive.

Si quieres probar con esa imagen puedes usar el siguiente código CSS

.rt-showcase-pattern .rt-container,
.rt-showcase-pattern .rt-container .rt-grid-12{
	width:100%;
}

#gantry_logo-5 #rt-logo{
	background-size:cover!important;
}

Puedes agregar este código al final del archivo:
/provaweb/wp-content/themes/atlas_wp/css/atlas_wp-custom.css

Saludos.


 
Respondido : 10/07/2017 9:45 pm
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Voy a probar lo que me comentas....


 
Respondido : 11/07/2017 9:40 am
Pepe
 Pepe
Respuestas: 41100
Illustrious Member Admin
 

Hola Jordi.

Ok, dejamos el hilo en espera por si necesitas retomar este hilo.

Un saludo


 
Respondido : 11/07/2017 9:42 am
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Saludos,

Ya he puesto el código que me comenta, pero como puede ver en la web no se adapta a la pantalla totalmente....sabe a que se debe?

Muchas gracias


 
Respondido : 11/07/2017 9:49 am
Pepe
 Pepe
Respuestas: 41100
Illustrious Member Admin
 

Hola Jordi.

El problema es que el logo es muy grande, es una imagen con un tamaño que no es normal para utilizar como logo.

Prueba añadiendo el siguiente código al mismo archivo:

#rt-logo {
    height: 250px;
    width: 100%;
}

Un saludo


 
Respondido : 11/07/2017 10:13 am
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Saludos,

Ese codigo ya lo tengo puesto:

#rt-logo {background: url( ) 50% 0 no-repeat !important;}
#rt-logo {width: 100%;height: 200px;}


 
Respondido : 11/07/2017 10:19 am
Pepe
 Pepe
Respuestas: 41100
Illustrious Member Admin
 

Hola Jordi.

Si te fijas en el código veras que aumentamos el tamaño del alto para que se muestre todo height: 250px;

Según la resolución puede variar, si ves que con lo que te pase no se muestra como quieres por favor adjunta una imagen de como lo ves.

Como consejo te diría que no pongas una foto para tu logo, utiliza una imagen.

Un saludo


 
Respondido : 11/07/2017 10:26 am
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Ya lo he puesto , pero lo unico que consigo...es agrandar la altura de la imagen de 200 a 250 pixels ... y lo que necesito es que se amplie al ancho de la pantalla..... el "with" no el height.... ya que he puesto 200 para que no tape tanta pantalla....

Tema Foto o Logo... el cliente quiere que sea esta foto...no puede hacer nada al respeto.

Adjunto captura de pantalla para que lo vean


 
Respondido : 11/07/2017 10:31 am
Pepe
 Pepe
Respuestas: 41100
Illustrious Member Admin
 

Hola Jordi.

Ok, añade lo siguiente a tu archivo custom.

.logo-block {
    margin: 0;
    padding: 0;
}

Un saludo


 
Respondido : 11/07/2017 11:22 am
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Hola Pepe,

Ahora si que ocupa toda la pantalla..... muchas gracias.

Ahora que tengo hecho , como aplico para que sea responsive la imagen , o sea como dice el título del tema que se ajuste a las pantallas completamente ?ç

Gracias


 
Respondido : 11/07/2017 11:31 am
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Por lo que entiendo, la image se tendria que adaptar al container o bloque donde está inclustada.... y este bloque adaptarse a la pantalla.

Es correcto lo que digo ?

Se puede hacer?

Muchas gracias or todo


 
Respondido : 11/07/2017 12:09 pm
Pepe
 Pepe
Respuestas: 41100
Illustrious Member Admin
 

Hola Jordi.

Puedes probar con el siguiente código:

@media (max-width: 760px) {
#gantry_logo-5 #rt-logo {
    background-size: contain!important;
}

}

Un saludo


 
Respondido : 11/07/2017 2:31 pm
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Hola Pepe,

Ahora tengo este codigo y no me funciona

.rt-showcase-pattern .rt-container,
.rt-showcase-pattern .rt-container .rt-grid-12{
width:100%;
}

#gantry_logo-5 #rt-logo{
background-size:cover!important;
}

.logo-block {
margin: 0;
padding: 0;
}

@media (max-width: 760px) {
#gantry_logo-5 #rt-logo {
background-size: contain!important;
}

}


 
Respondido : 11/07/2017 5:02 pm
Jordi
Respuestas: 83
Trusted Member
Topic starter
 

Buenas a todos ,
Primero dar las gracias a todos y comentar que fuciona más o menos con vuestras indicaciones, el código que he puesto es este:

.rt-showcase-pattern .rt-container,
.rt-showcase-pattern .rt-container .rt-grid-12{
	width:100%;
    height:100%;
}

#gantry_logo-5 #rt-logo{
	background-size: contain!important;
}

.logo-block {
    margin: 0;
    padding: 0;
}

@media (max-width: 1500px) {
#gantry_logo-5 #rt-logo {
    background-size: contain!important;
}
 
}

#rt-logo {background: url( http://creativaonline.cat/provaweb/wp-content/uploads/logo-dalt-1.jpg ) 50% 0 no-repeat !important;}
#rt-logo {width: 100%; height: 180px;}

Pero el problema ahora es otro, al verlo en una tablet o mòbil me sale un espacio en blanco entre el logo y el contenido de la web.... adjunto imagen


 
Respondido : 11/07/2017 5:23 pm
Página 1 / 2