Como agregar custom MEDIA QUERIES CSS en Divi explicado

¡Hola Divi Lovers! en este tutorial te explicaremos como agregar y usar los custom media queries de CSS en Divi de una manera sencilla y rápida. Este tutorial te mostrará cómo agregar media queries CSS personalizados en Divi para hacer que tu sitio web tenga CSS personalizado cualquier tamaño de dispositivo con tamaño de pantalla diferente.

Índice

¿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 ir usarse para dar estilos específicos a distintos tipos de dispositivos. Básicamente, esto cambia la experiencia del usuario según el comportamiento y las características del usuario y del dispositivo donde visualizar el contenido.

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 y totalmente adaptado a cada dispositivo.

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).

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.

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) {
 
}

¿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

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:

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

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.