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

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:

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:

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.