Seleccionar página

Aumentar el tamaño del logo en Divi [Versión Móvil]

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 en Divi WordPress

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 u sando 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%;

}}

Lo has probado? Te ha funcionado? Si te hemos ayudado o tienes alguna duda déjanos tu opinión. GRACIAS