Uno de los módulos más utilizados para todo tipo de páginas hechas con Divi es el llamado «Título de anchura completa» debido a su flexibilidad y posibilidades, entre las que se encuentra la opción de ponerlo a pantalla completa, y que por defecto permite añadir 2 botones, desde los que enlazar a otras partes de la página o a otras páginas.

En lo que respecta a los dos botones, en ordenadores de sobremesa simplemente quedan perfectos.

Pero, ah amigo, la cosa cambia si ves este mismo módulo, con sus dos molones botones, en un dispositivo móvil. Por obra y gracia de los demonios de Internet, y en este caso de Divi en concreto, los botones salen desalineados, dando una pobre imagen del módulo, y en consecuencia del diseñador, sí, tú.

Queda realmente horrible, hace daño a la vista.

¿Tiene solución?

Pues claro, sino ¿para qué estamos aquí?, y encima es una solución muy sencilla.

Únicamente tienes que copiar y pegar el siguiente CSS en la sección de CSS adicional del personalizador de temas de WordPress:

/* Titulo ancho completo Divi botones alineados movil */
@media all and (max-width: 479px) {
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_two {
margin-left: 0;
}
}

Una vez guardes los cambios el resultado es claramente … muuuuucho mejor, como siempre debió ser:

Este es un truco básico, fundamental, que deberías aplicar en cualquier página creada con Divi en la que haya un módulo de título de anchura completa, pues recuerda que la mayoría de los visitantes nos conocen por primera vez desde dispositivos móviles, y ¿a que no queremos dar una pobre impresión del diseño de nuestra web?

Pues eso, a repasar todas tus webs hechas con Divi en las que uses este módulo, y a arreglarlo 😉