Un pequeño problema que surge a la hora de usar Divi es que en la versión móvil el logo se ve muy pequeño.
¿Porque el logo se ve pequeño en el Móvil?
Existe un espacio limitado para colocar el logo, los logos suelen ser imágenes normalmente rectangulares, esas imágenes al no ser imágenes vectoriales, se pueden deformar, Con los logos cuadrados no suele dar problemas.
Cual debería de ser el tamaño del logo de mi página web?
Depende, no hay un máximo ni un mínimo. Mi recomendación seria que la imagen fuera lo más pequeña posible sin que perdiera la calidad. YO suelo usar tamaños de 600 x 400 o 800×300 dependiendo del logo.
Recuerda seguir que cada vez que subas una imagen debería de redimensionar esa imagen a un tamaño apropiado… y optimizar la calidad de la imagen. Tengo un artículo en el blog de cómo lo hago yo de forma manual o automática
Aumentar el tamaño del logo Opciones DIVI
Revisar las opciones del tema en este caso DIVI en el apartado de Apariencia > Personalizar o en Divi > personalizador de Temas.
Accedemos a la sección cabecera y navegación barra menú y ampliamos el tamaño de logo Max y el menú en altura. Revisamos que el logo se vea bien en la versión Móvil.
Esta opción no suele funcionar por lo que haremos lo siguiente:
Ampliar el tamaño del logo con Css.
Vamos a indicarle que coja el ancho y largo máximo en cualquier versión de la web [PC, móvil o Tablet].
Vamos a la sección del código y añadimos lo siguiente:
.et_header_style_left #logo, .et_header_style_split #logo {
max-width: 100%;
max-height: 80%;
}
El ancho y el tamaño máximo dependerá de tu logo, si tu logo tiene un tamaño de 1400 x 800 no te va a valer ya que es demasiado grande la imagen.
Mejorando y usando Media Querys
Para mejorar la segunda opción .. Se podría añadir una serie de líneas en Css para que este código solo se cargara en caso de que las pantallas fueran más pequeñas, usando para ello las media Querys.
La indicamos que para pantallas con un máximo de 900px cargue este código. [Recuerda probar en diferentes pantallas y densidades de móvil que se vea correctamente]
@media only screen and ( max-width: 900px ) {
.et_header_style_left #logo, .et_header_style_split #logo {
max-width: 100%;
max-height: 80%;
}}
Segun comentarios del blog, veo que las ultimas actulizaciones de divi, o segun si usas el nuevo header de divi u otro plugin entonces tendrias que usar otro codigo. por ejemplo:
@media only screen and (max-width: 1024px)
.logoheight: 100px;}
Lo has probado? Te ha funcionado? Si te hemos ayudado o tienes alguna duda déjanos tu opinión. GRACIAS
Muchas gracias !
el código me ha servido ;)
Felicitaciones me resulto. Gracias
Gracias a ti por comentar :)
Hola , llevo dos días tratando de resolver este problema con mi logo. He aplicado todos los media querys posibles y ninguno me funciona. sigue saliendo muy pequeño el logo en dispositivos moviles.
Te agradecería enormemente si me pudieras echar una mano
Hola Luis. Escribeme un email o por privado y te miro :)
Hola! A mi me sucede lo mismo, sigue viendose muy pequeño el logo en dispositivos moviles. Muchas gracias por tu ayuda
Veo que tu web el codigo deberia ser asi…pero deberiais jugar con los tamaño o las media querys o con los tamaños en %
@media only screen and (max-width: 1024px)
.logo {
height: 100px;
}
PD: Por lo que veo usas extra, no divi, supongo que por eso no te permite hacerlo.
Muchas gracias, me ha funcionado
Gracias funciona!!!
Me alegro :)
Hola, gracias por tu css, funcionó perfecto en dektop y modifiqué el max-height a 100% pero en mobile quedó en 80%.
Primero lo había puesto en 100 en todos los dispositivos con personalizador de tema Divi y después encontré tu excelente post. No modifiqué lo del personalizador. Podría ser relacionado? No entiendo porque en mobile no quiere ir full height.
Gracias por tu respuesta
Si seguramente este relacinado es mirar el codigo con el inspector y ver como adaptarlo a veces pasan estas cosas. :(
Muchas gracias, me funcionó perfecto!!😍
Gracias! Me funcionó la primera opción