Align Buttons in Divi Columns

hi and welcome to a short one here for tutorial tuesday one question i see a lot in the forums is in relation to evening up the heights of columns and particularly to aligning buttons at the bottom of columns so that's what we're going to have a look at today my preferred method for doing that is using the display flex property over using the position fixed so that's what we're going to be doing so three steps involved the first one which you may already know is you go into the row settings click on the design tab sizing and click on equalize column heights so that immediately fixes your background assuming you have a white background in your column that will make all of the columns the same size next thing we need to do is deal with the buttons and there's two steps involved in doing that so firstly we select the first column choose the advanced tab custom css and for the main element there are going to be two lines of css first one is display flex and immediately you'll see that the elements in that column flex themselves unfortunately they flex themselves in the wrong direction so in order to correct that we need one more line of css which is flex direction and we need to set that to column and then that immediately sorts that problem out so what we then need to do is copy that custom css so extend custom css styles and i'm going to extend it to all columns on this page so that applies the same settings to the other two columns okay so we can then close that tab and we can also close that tab the next thing we need to do is look at the button settings and the way the flex property works is by using the margin auto on the top so i've already set a margin bottom of 30 to get the spacing at the bottom of the column but if i now type in auto you'll see immediately that the button aligns itself 30 pixels off the bottom of the column we then need to apply the same settings so in fact i'm going to to go back into here back into design back into spacing and i'm going to extend this margin setting to all buttons on this page and once i've done that and closed you'll find that we have our desired result and all three columns are the same height and the buttons at the bottom are all aligned the advantage of doing it with this method is that the responsiveness is very easy so once you go to say a tablet view everything just works and the same with a mobile view one of the disadvantages of using the position fixed method to do this is that you sometimes have to end up playing around with your padding settings to get everything to work so it's a pretty simple fix and if later on you need to go in and change say dramatically the length of text all of the columns automatically adjust themselves to work well i hope you find that useful if you want to get in touch with any further questions i'm more than happy thank you

Channel: Divi Coaching - Build Great Websites with Divi

Views: 1,596

Keywords: align wordpress columns, align divi buttons, align divi columns, equalize divi columns, equalise divi columns, equalize wordpress columns, equalise wordpress columns, line up buttons wordpress, line up buttons divi, line up website buttons in divi, align buttons to the bottom of columns using divi, align buttons to the bottom of a row using divi, wordpress, divi tips and tricks, divi tips, line up divi buttons, divi tutorial, divi theme, elegant themes

Id: fmdt--2NzNU

Length: 3min 28sec (208 seconds)

Published: Tue Mar 23 2021