Si utilizas Divi habitualmente, seguro que te has dado cuenta que el tamaño de los H2 en la versión móvil es más pequeño que el de los H3.

Un ejemplo:

Cómo cambiar el tamaño de los H2 en el móvil

Como puedes ver, el texto Alternativas gratuitas a Photoshop se trata del H2, el cual es más pequeño que los H3 (#1 GIMP y #2 Inkscape), los cuales, siguiendo un orden lógico, deberían tener un tamaño inferior al del H2, como si sucede en la versión de escritorio.

Es decir, H2 en la versión móvil deberían tener un tamaño superior y, por lo tanto, verse de la siguiente manera:

Cómo cambiar el tamaño de los H2 en el móvil

En esta segunda captura con los tamaños ya modificados, puedes ver como el H2 tiene un tamaño superior a los H3.

Modifica el tamaño de los títulos de Divi en el móvil

La solución es muy sencilla. Para corregir este pequeño error, simplemente tienes que añadir este código en tu plantilla.

Para ello, debes ir a: Divi > Opciones de tema > CSS personalizado y pegar el siguiente código debajo de la última línea de código que encuentres:

@media screen and (max-width: 980px) {
#left-area h2 {
  font-size: 24px;
}

#left-area h3 {
  font-size: 22px;
}

}

Como ves, con este código CSS puedes modificar el tamaño de los H2 y H3 en el móvil.

Si quieres adaptar el tamaño al diseño de tu web, solo tienes que modificar los valores que aparecen en “size”.

Y si necesitas añadir más subtítulos (H4, H5 o H6), simplemente tienes que reproducir el mismo patrón, que podría ser el siguiente siguiendo la misma estructura de títulos:

@media screen and (max-width: 980px) {
#left-area h2 {
  font-size: 24px;
}

#left-area h3 {
  font-size: 22px;
}

#left-area h4 {
  font-size: 20px;
}

#left-area h5 {
  font-size: 18px;
}

#left-area h6 {
  font-size: 16px;
}

}

Esperamos que con este sencillo tutorial puedas adaptar y ajustar los tamaños de los títulos (especialmente de los H2) de tu web con Divi en el móvil.

¡TE REGALAMOS UN DISEÑO PARA DIVI!

Descarga gratis este diseño especialmente pensado para empresas, negocios o freelances.

➤ Diseño para página de inicio o landing page

➤ Opciones del tema con CSS personalizado

➤ Ajustes personalizados: tipografías, colores, títulos...

10% OFF APUNTÁNDOTE A LA NEWSLETTER

¡Consigue un 10% de descuento para todas neuestras plantillas!

RGPD

¡Muchas gracias por suscribirte! Revisa tu email :)