#06 Custom Scripts & Mobile Adjustments

by Ania

March 23, 2021

This time, instead of adding custom CSS to our child theme’s style.css file – I’ve included the code inside the Divi Builder. To align modules vertically inside a column (as in the fist section of the home page), I made sure that the “Equal Column Heights” option is enabled for the Row settings and I added this bit of code inside the Column Custom CSS to align modules to the bottom:

display:flex; align-items:flex-end;

And this bit to align the modules in the center within the Column (it needs to be added in the Column Advanced settings -> Custom CSS -> Main Element:

display:flex; align-items:center;

To keep the 3-column structure for Tablet, I added this bit of CSS to the Row settings. Advanced tba -> Custom CSS -> Main Element (Tablet device):

display:flex;

And then, to keep the single-column on Phone, we need to change the CSS for Phone device (for the same element):

display:block;

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *