That would be caused by how the space for each column is already small, and it just gets smaller as the viewport does. As you notice on your second screenshot, the body texts are going over 4 lines instead of 2, headings going 2 lines instead of 1, button text going over 3 lines instead of 1, that is what breaks the layout.
Try using wider columns, maybe do 2 rows, 1 3 column and the other a 2 column row so your content have enough space.
Are you using the Callout module? Or are those separate modules each? Or would it be possible for you to share the URL of the site so we may take a look?
Should be possible with custom CSS. I’d suggest using Callouts instead, as it would be easier to style. You can simply add a class to the row where you want the buttons to align, e.g., align-ctas, then use the CSS snippet below.
This is the only way that I know of to achieve that. You’re gonna need to assign the class to the row this time, and not the module. And play around with the columns bottom padding/margin, instead of the row.
@media (min-width: 768px) {
.align-ctas .fl-col {
position: relative;
}
.align-ctas .fl-callout-button {
position: absolute;
bottom: 0px;
width: 200px; /* Change to whatever width you like for your buttons */
left: 50%;
margin-left: -100px; /* Must be 50% of the width you set above */
}
}
Edit: I’ve placed it inside a media query so it doesn’t apply to mobile.
I’ve attempted to do this, and having some success.
The only problem I have though is that the buttons are covering some of the content above them.
Any thoughts?
See example here:
ps, I have made a ‘sort of’ solution by adding a no-breaking space inside a paragraph on the longest column (in each example) so the button is pushed down.
