DiviFast: plantillas para Divi


Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

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

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:

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.

2 Comentarios

  1. Leonela Arguello

    Hola.
    Desde el año pasado quería cambiar este aspecto y no sabía cómo, buscaba en personalizar, pero no podía, y con este código css, lo logré.
    Muchas gracias.

    Responder
  2. hernan

    Tremendo post! Era lo que necesitaba para que se vieran bien los H2! Graciasss!!!!

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

Nuestras plantillas

Llévatelas todas

Plantillas Divi | Divi templates

te regalamos un diseño gratis para divi

Información Básica sobre Protección de Datos

Responsable: DiviFast. Finalidad: suscripción a nuestra newsletter. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@divifast.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en nuestra política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.