Aligning buttons to the bottom in a row of Callout modules

Beaver Builder
1

I have a site with a row of 4 columns set to “equalize height.” In each, I have a Callout module. I’d like to align the buttons to the bottom of the row. Headline and image aligned top, text of different lengths flowing below image, buttons aligned horizontally at the bottom.

I asked the best (most robust & future-proof) way to do this on the slack channel, and I got a set of CSS that would work, and a suggestion to enter a ticket to get the official approved method, and to suggest that this might be a common use case in need of an option in the module.

(I’ve just come off a round of debugging custom Divi CSS that made perfectly nice sites non-responsive, so I lean towards less custom CSS where possible.)

2

Site with unaligned buttons: http://athenavortex.com/campbell

Unaligned buttons

Hacked suggestion from #how-do-I Slack channel
Using this CSS:

.fl-callout-button {
   position: absolute;
   bottom: 0;
   margin-bottom: 20px;
}

.fl-callout {
   margin-bottom: 50px;
}

Image with custom CSS as provided in slack

And suggestion:
“I think it’d be nice to suggest to BB that an option exists to stick buttons to the bottom in Call to Action modules when same height. That way, no worries about CSS extras
and everyone benefits :wink:”

3

fixed image link for staggered buttons:
staggered buttons

4

Hey Dorothy,

That CSS should do it. You can head over to our User Voice Forums and add that as a feature request. :slight_smile:

Ben

5

It turns out that this CSS does not work responsively-- it makes the buttons disappear on mobile devices. (Bah, that’s what I was afraid of.)
Missing buttons in mobile view

I’m trying to figure out what selectors are used for mobile switches so I can duplicate them in the custom CSS, but I can’t quite figure out what they are or where they are stored. I found chunks of style information in the database in theme_mods_bb-theme, but I haven’t been able to dig into it to find the mobile information, as it’s clearly parsed into CSS elsewhere. Is my best bet digging into the PHP, or can somebody tell me off the top of their head. (I’m sure I can’t be the only person with this type of issue.)

OK, I found it in less/theme.less. It looks like the system switches at 768 pixels, so for the folks who come behind me, here’s what you want to use:

/* Media Query - 768px or greater
----------------------------------------------------------- */

@media (min-width: 768px) {
.calloutrow .fl-callout-button {
   position: absolute;
   bottom: 0;
   margin-bottom: 20px;
}

.calloutrow .fl-callout {
   margin-bottom: 50px;
}
}

Magically reappearing buttons:
Magic buttons are back

6

Hey Dorothy

Looks great, thanks for sharing!! Have fun! :slight_smile:

KC