Divi-How To Align Buttons To The Bottom Row

How To Align Buttons To The Bottom of a Row

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.

divi buttons not aligned correctly

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.

divi buttons aligned at bottom

How To Do It

Add a multi-column row to your section.

create a multi-column grid

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

row settings

add css class

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

equalize column heights

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

blurb columns

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.

divi buttons aligned at bottom

One Comment

  1. Tracey Munn

    on December 16, 2019 at 11:05 pm

    Reply

    Excellent – only tutorial that worked for me – still working in late 2019!

Leave a Reply

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