How To Align Buttons To The Bottom of a Row

June 27, 2018

Have you ever noticed that when using buttons with the blurb or text modules with Divi that the buttons do not align nicely at the bottom?

I find this so frustrating as it just looks sloppy.

In this blog post, I will show you how you can use a little CSS to easily get those buttons to align vertically at the bottom. No matter how much text you use, the buttons will always align nicely at the bottom.

How To Do It

Add a multi-column row to your section.

Open the row settings, click on the “Advanced tab”, and add a custom CSS Class named: ss_row_align_buttons

Next click on the “Design” tab, and enable “Equalize Column Height”

Now you can go ahead and add your blurb, text, or image modules then add the your button modules below.

Save your page and next you will need to add the small bit of custom CSS.

How To Add The Custom CSS

If you are using a child theme you can go to Appearance>Editor and open your stylesheet.

If you are using the standard Divi theme then you will need to go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS.

/* buttons fixed to the bottom */
.ss_row_align_buttons .et_pb_column {
padding-bottom:30px;
}

.ss_row_align_buttons .et_pb_button_module_wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

That’s it, now go back and test your page. Your buttons now should be aligned correctly at the bottom.