I found a lot of times I want to build a series of modules, say text and buttons, but have them line up neatly.

If you put the top modules in one row and the bottom modules in another it lines up perfectly on desktop – then you switch to mobile view. All the boxes stack above, text in the middle and the buttons below.

Thing of interest 1

Thing of interest 2

Thing of interest 3

You can see this by resizing the window. The boxes and buttons go into the wrong order.

Thing of interest 1

Thing of interest 2

Longer text

Thing of interest 3

Much
Longer
Text

You can create sections and show/hide them on devices – but this adds load time to the page and build time to the job. Instead you can use the CSS below (add to custom css) to achieve this row, which forces the buttons to the bottom of the column.

Set the columns to equal height in the row options, and add .padme class to each column and it lines up nicely. Resize the window and you can see they keep the right order across devices.

.padme { display: flex; flex-direction: column; justify-content: space-between; }

Get In Touch

I'm happy to talk over what you need. If I don't have the solution I'll advise you on who might, or what you can do next.

New Field

4 + 11 =

%d bloggers like this: