Cuando estás creando una página en WordPress y Divi, es muy habitual crear varios botones seguidos, especialmente si estás creando un listado de enlaces o un menú.
El problema de los botones en Divi es que, por defecto, su tamaño depende del largo de texto que contienen. Y esto provoca un efecto bastante feo si quieres añadir varios botones seguidos a tu sitio.
Y aunque solucionarlo es bastante sencillo, hay muchas personas que no conocen este truco y muestran páginas con contenido desigual como el que te enseño a continuación.
Índice de contenidos
Cuando los botones en divi no están alineados
Uno de los ejemplos más evidentes para ver varios botones seguidos es en una página de enlaces para tu biografía. Si no sabes de qué te hablo en el enlace tienes un ejemplo completo.
Por defecto, al crear un bloque de botones en divi vas a tener algo así:
Como se puede observar a simple vista, y aunque cumpliría su finalidad, si quieres dar una buena primera impresión, no lo puedes dejar así.
Corrección con 2 líneas de CSS
Como te he dicho más arriba la solución es bien sencilla, y tan solo tendrás que añadir siguientes líneas de código en la pestaña avanzado de las opciones del botón.
min-width: 450px;
text-align:center;Con estas dos líneas le estamos diciendo al navegador, que el botón tenga como mínimo 450px de ancho y que lo alinee al centro de la pantalla.
Ajustes del botón > Avanzado > Elemento principal
Como puedes observar el resultado ya ha cambiado bastante.
Cuidado con la versión móvil.
¡Ojo!
El código que te he entregado estamos indicando que el botón tenga un ancho mínimo de 450px.
Para muchos dispositivos no habrá ningún problema, pero ten en cuenta que no he añadido ninguna propiedad para móvil.
Esto hará que al ver la página en un móvil de 375px (cómo un iphone 11 pro), el contenido sobresalga por la derecha.
Para solucionarlo bastará con añadir una pequeña regla al botón para que se vea de otra forma cuando estemos visualizando el contenido desde un móvil.
En la siguiente imagen verás cómo se ha solucionado el problema del móvil dándole al botón un tamaño en % y no en px.
De esta manera el botón tendrá siempre el tamaño del 100% de la pantalla que lo contiene.
O dicho de otra manera, se adaptará a todas las pantallas de teléfonos móviles sea cual sea el tamaño de su pantalla.
Conclusión
Ya ves como es muy sencillo adaptar e igualar el tamaño de los botones en divi a las pantallas de casi todos los dispositivos del mercado.
Recuerda que en tu caso particular puede que no te sirvan las medidas que yo he utilizado y tengas que jugar para funcione en tu proyecto.
Recuerda usar los tamaños en px o en % según el dispositivo o tus necesidades.
Por último puedes visitar mi página de enlaces y verás el resultado final de este ejemplo.
También la puedes ver aquí mismo.
Si te ha parecido interesante este artículo estaré muy feliz de leerte en los comentarios.
Un saludo
0 comentarios