Buenos días
A las diferentes cabeceras de mi Web, por ejemplo la que adjunto, quiero modificar el tamaño solo para que se ajuste a móviles y tablets, pero no funciona con el siguiente código, ¿alguna idea del error? Gracias!
@media only screen and (max-width: 600px) {
div#zn-bgSource-image {
width: 100%!important;
height: auto;
}
}
URL del sitio: Contenido solo visible a usuarios registrados
Hola Pepe,
Esa imagen no aparece en la página de destino, es esta otra :
La cabecera de Tiendas que adjunto en ese link.
Hola Jorge.
prueba añadir lo siguiente al archivo style.css:
@media only screen and (max-width: 600px) { .zn-bgSource-image { background-position: center; background-repeat: no-repeat; background-size: contain!important; } .page-subheader { background-color:transparent!important; } div#page_header { margin-top: 0px; } }
Un saludo
Pues funciona para adaptar la imagen al móvil, pero desaparece el menú responsive y mueve el logo, centrándolo.
Hola.
para el logo añade lo siguiente:
.logosize--contain .site-logo-img { margin-right: 50%; }
Para el menú tienes el siguiente código que lo oculta:
@media (max-width: 992px) #main-menu, .zn-megaMenuSmartArea-content { display: none !important; }
Tienes que revisar los archivos css de la plantilla y ver dónde está añadido, no consigo verlo con el inspector.
Por lo que veo estás realizando muchas modificaciones, Tienes que ir con cuidado ya que lo que realizas en un bloque puede afectar a otro bloque de la web y te encontras con que todo está desorganizado.
Un saludo
Muchas gracias Pepe, parece que todo funciona correctamente con el código que me has cambiado, lo revisaré todo por si a caso descuadró algo.
Un Saludo!