Custom Media Queries CSS en Divi: cómo agregarlos

Divi ya hace un excelente trabajo manejando el responsive de forma visual desde el constructor, con sus tres vistas de escritorio, tableta y teléfono. Pero llega un momento en que necesitas un control fino que esas tres vistas no te dan, y ahí es donde entran las media queries personalizadas: te dejan definir reglas CSS para anchos de pantalla específicos que Divi no contempla por defecto.

¿Qué son los Media Queries en CSS?

Un Media Queries es una funcionalidad HTML / CSS que permite que el contenido de una página web se adapte al tipo de pantalla en el que se está procesando, como una pantalla de computadora o la de un teléfono por ejemplo. Las media queries son básicamente una forma de asignar un CSS personalizado por cada tipo de dispositivo para colocar estilos específicos por cada tamaño de pantalla.

En CSS, las media queries suelen usarse para dar estilos específicos a distintos tipos de dispositivos. Para entenderlo con una analogía simple: una media query es como una instrucción condicional que le dices al navegador. Le dices "si la pantalla mide menos de tantos píxeles de ancho, aplica estos estilos", y el navegador evalúa esa condición en tiempo real según el tamaño de la ventana del visitante.

Ahora vamos a entender el punto de quiebre o CSS Breakpoints en Divi

¿Qué es el punto de quiebre o CSS Breakpoints?

Otra forma en que nos referimos a las media queries es con el término relacionado de "CSS Breakpoints", ya que los puntos de quiebre se definen mediante las media queries. Una media queries le dice al navegador cómo mostrar el contenido si coincide con ciertos criterios, por ejemplo, el tamaño de pantalla.

Los breakpoints CSS son puntos de quiebre definidos en el código del sitio web donde el contenido cambia o responde según el ancho de pantalla del dispositivo. Tener múltiples puntos de quiebre te permite mostrar el diseño totalmente adaptado a cada dispositivo.

La palabra "quiebre" describe bien lo que pasa: es el punto exacto donde el diseño pasa de una disposición a otra. Por debajo de cierto ancho, tu menú horizontal se transforma en hamburguesa o tus columnas de tres se apilan en una sola. Elegir bien dónde colocar esos cortes es la diferencia entre un sitio que se adapta con elegancia y uno que se ve roto en tamaños intermedios.

Puntos de quiebre o CSS Breakpoint en Divi

De forma predeterminada, Divi viene con tres puntos de quiebre principales que están codificados en el tema. Estos tres puntos de quiebre de Divi integrados están representados por tres dispositivos diferentes, una computadora de escritorio, una computadora portátil y un teléfono.

Quieres aprender a ajustar los estilos de un sitio web hecho con Divi a móvil de manera sencilla, checa este tutorial donde te enseñamos a hacerlo rápidamente.

En Divi, los tamaños exactos para estos puntos de quiebre son Escritorio (por encima de 981 px), Tableta (980 px - 768 px) y Teléfono (767 px y por debajo). Conocer estos valores es fundamental cuando escribes tus propias media queries, porque te conviene alinearlas con los breakpoints nativos del tema para que tus estilos y los de Divi no peleen entre sí.

Consultas de media queries en Divi

Las consultas de media queries son básicamente una forma de especificar el CSS por tipo de medio y dispositivo. En este caso, podemos usar un ejemplo donde el tipo de media es "All" (es decir, adecuado para todos los dispositivos). Mira el siguiente ejemplo de consulta de media:

@media all and (max-width: 980px) {
h1 {
font-size: 30px;
}
}

Puedes ver qué "All" define todos los tipos de medios y "(max-width: 980px)" es la función de medio que especifica el ancho del dispositivo al que se debe aplicar el CSS entre corchetes. En este ejemplo, el tamaño de fuente h1 será de 30 px solo en una pantalla de 980 px o menos. Vale la pena recordar la diferencia entre max-width (se aplica de ese ancho hacia abajo, ideal para adaptar "de grande a chico") y min-width (actúa de ese ancho hacia arriba, perfecta para un enfoque mobile-first).

Aquí hay una lista de las principales consultas de medios utilizadas en el tema Divi. Puedes usarlas para generar tus CSS personalizado.

/*** Estilos para desktop y más grandes ***/
@media all and (min-width: 1405px) {

}

/*** Estilos para laptops ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {

}

/*** Estilos para tables y menores ***/
@media all and (max-width: 980px) {

}

/*** Estilos solo para tables ***/
@media all and (min-width: 768px) and (max-width: 980px) {

}

/*** Estilos solo para móviles ***/
@media all and (max-width: 767px) {

}

/*** Estilos para móviles en horizontal ***/
@media all and (max-width: 479px) {

}

Te recomiendo guardar este bloque como plantilla base en algún lugar de fácil acceso. Cada vez que arranques un proyecto nuevo, pegas esta estructura completa en tu CSS y solo rellenas los corchetes que necesites: tener los seis rangos ya definidos y comentados te ahorra recordar los valores exactos y reduce los errores de tipeo en los breakpoints.

Consejo: Cuando una media query no parece estar funcionando, lo primero que debes revisar es el orden de tus reglas y la especificidad de tus selectores. El CSS se aplica de arriba hacia abajo, así que si una regla general aparece después de tu media query, puede estar sobrescribiéndola. Usa las herramientas de desarrollador del navegador (clic derecho, Inspeccionar) para ver exactamente qué regla está ganando y por qué.

¿Donde insertar el CSS Media Queries en Divi?

Esto es muy fácil, puedes insertar este código en diferentes lugares:

• Opciones del tema Divi > CSS personalizado
• Opciones de Página > Ajustes > CSS personalizado
• Personalizador de temas > CSS Personalizado

Una regla práctica para elegir entre ellas: el CSS de las Opciones del tema o del Personalizador se aplica a todo el sitio, ideal para reglas globales; el CSS dentro de las Opciones de Página solo afecta a esa página, perfecto para ajustes puntuales que no quieres que se filtren al resto del sitio.

Recuerda que, para insertar el CSS media queries en Divi solo debes conocer la clase CSS a la que quieres asignarle el CSS personalizado y luego elegir la media queria a la que quieres asignarle ese CSS.

Asignas el medio, y dentro de los corchetes asignas el CSS personalizado que desees para este tipo de medio. Vamos a ver un ejemplo.

Cambiar al ancho de la tienda en Divi en dispositivos móviles

En este ejemplo, vamos a resolver un problema común en Divi del que seguramente siempre has querido ver la solución. Por defecto, el módulo de tienda en Divi coloca los productos en dos columnas (aunque estén en una sola fila),

Bueno ¿qué debemos hacer si queremos hacer que los productos queden en una sola columna?

Podemos agregar el siguiente CSS con la media queries personalizada:

@media all and (max-width: 650px) {
    #page-container #main-content .woocommerce .product {
        width: 100%!important;
    }
}

y este sería el resultado aplicando el CSS personalizado:

Fíjate en dos detalles de este snippet, porque son la razón por la que funciona. El primero es el ancho de quiebre: 650 px corta justo donde un teléfono ya no tiene espacio cómodo para dos columnas de productos. El segundo es el encadenamiento de selectores #page-container #main-content .woocommerce .product, que aumenta la especificidad para asegurar que tu estilo gane por encima de los que trae Divi de fábrica, reforzado por el !important al final.

Como ves, de esta manera podemos corregir un CSS de manera responsiva según el tipo de dispositivo en el que el usuario ve el sitio.

Buenas prácticas al trabajar con media queries en Divi

Ten en mente un principio de fondo: las media queries personalizadas deberían ser un complemento de lo que Divi ya hace, no un reemplazo. Si te encuentras escribiendo decenas de reglas CSS para forzar el responsive de cada módulo, probablemente estás peleando contra el constructor en lugar de aprovecharlo, ya que muchos ajustes se resuelven directamente desde las opciones responsivas de cada módulo. Y prueba siempre en dispositivos reales: a veces un diseño que se ve perfecto al achicar la ventana de escritorio se comporta distinto en el celular de verdad.

Consejo: Comenta siempre tus media queries personalizadas indicando qué problema resuelve cada una, igual que hicimos con la plantilla de breakpoints. Cuando vuelvas a ese sitio meses después (o cuando lo herede otro diseñador), un comentario como "ajusta la galería a una columna en móvil" vale oro frente a un bloque de CSS sin contexto. El código sin documentar es deuda técnica que te cobra intereses cuando menos lo esperas.

Preguntas frecuentes

¿Necesito saber programar para usar media queries en Divi?

No necesitas ser programador, pero sí te conviene manejar nociones básicas de CSS: saber qué es un selector, una propiedad y un valor. Las media queries en sí son sencillas de copiar y adaptar usando las plantillas de este tutorial. Lo único que realmente debes aprender es a identificar la clase o el ID del elemento que quieres modificar, con las herramientas de desarrollador del navegador.

¿Dónde es mejor poner el CSS, en Opciones del tema o en la página?

Depende del alcance. Si la regla debe aplicarse en todo el sitio (por ejemplo, ajustar todos los títulos H1 en móvil), va en las Opciones del tema o el Personalizador. Si solo afecta a una página puntual, colócala en las Opciones de esa página para mantenerla aislada. Esta separación te ayuda a evitar que un ajuste local termine afectando partes del sitio que no querías tocar.

¿Por qué mi media query no se aplica aunque el código parece correcto?

Las dos causas más comunes son la especificidad insuficiente del selector y la caché. Si tu regla es menos específica que la de Divi, no gana; refuerza el selector encadenando IDs y clases como vimos en el ejemplo de la tienda. Y si acabas de guardar el CSS pero no ves cambios, limpia la caché de tu plugin de optimización y la del navegador, porque a menudo el código sí está bien y solo estás viendo una versión vieja almacenada.

Conclusiones

La mayoría de los estilos que quieres personalizar en Divi ya está integrado y lo puedes resolver todo con Divi. Sin embargo, dependiendo del diseño de tu sitio, es posible que quieras agregar algún CSS personalizado en determinados tamaños de pantalla en Divi utilizando las consultas de CSS de media queries. 

Lo importante es que ahora tienes las dos piezas del rompecabezas: entiendes qué son los breakpoints y tienes una plantilla lista de las media queries más usadas en Divi para copiar y adaptar. Mi recomendación final es que empieces despacio: identifica un solo problema responsivo concreto, escribe la media query para resolverlo, pruébala en un dispositivo real y observa el resultado. Si quieres profundizar en cómo Divi maneja internamente el responsive antes de recurrir a código, te recomiendo el curso completo de Divi 5.

Si tienes alguna duda sobre un caso específico o quieres compartir el snippet que resolvió tu problema, déjame un comentario aquí abajo y lo vemos juntos.