Some CSS challenges are so far out that it is even hard to find a headline for sharing them. Letting images speak, I simply didn’t like that the buttons are not aligned when I create a certain sequence of modules in a multi-column row, like in this example an image followed by a text of different length (by the way, most websites solve this issue by writing texts of same length, a limitation I would like to avoid) followed by a button.
DIVI offers to equalize the column height, which needs to be activated for our CSS trick, but it doesn’t solve the issue in itself. Also it would be possible to give all images, all text modules and all buttons their own row, which would result in the desired alignment, BUT the responsive behaviour is not correct, because on small screens appear now the three images followed by three texts followed by three buttons, obviously not an option. So let’s drop this idea and set our row to equal column heights to have our containers reach to the same baseline. Also, to address only that one row and not by accident messing up other constructions, we assing a CSS class to that row, in our example align-bottom-column.
Now here comes the trick to bottom align the button modules. We catch the container-div of the button module (if you want to apply this trick with other modules at the bottom, you need to use their class instead) and set it to position: absolute and bottom: 0 to align it at the baseline. The left, right and margin entries are centering it, and in case you don’t want center alignment, just drop those. Since the absolute positioning is not taking care for the text, the buttons would overlap the last lines, so we give the column itself some padding down there. Here comes a caveat, because if on certain screen sizes the button text would become two lines, therefore the button higher, it would again collapse. I kept the button text short, which is at least easier then keeping the text at same length.
|
1 2 |
.align-bottom-column .et_pb_column {padding-bottom: 50px;} .align-bottom-column .et_pb_button_module_wrapper {position: absolute; bottom: 0; left: 0; right: 0; margin: auto;} |
Voilá, multi-column call-to-action as my aim for perfection likes it. I hoped to find a solution with display: table or even flexbox, which might allow even variable button heights, but I was not able to figure something out. If you have a more flexible solution, please let us know.
Hi, it doesn’t work for me :(
where i have to paste de code?
The CSS code goes into the DIVI / Theme Options / General / Custom CSS at the bottom. Paste there and save changes. And don’t forget the Equalize column heights and CSS class in the row itselt.
Well. I could dance at your wedding! I’m a beginner with Divi and css etc and am so pleased I stumbled across your site. Those few lines of code to align the buttons at the bottom of the columns are what I’ve been looking for the last three days. Brilliant!
I echo Peter Moore’s comment. Holy cow! Thank you, thank you, thank you!!!!
Brilliant! Thanks!
You are a lifesaver! Thank you so much for this. I had the exact same issue and had given up figuring it out.
Thank you, thank you, thank you!
Thanks so much for sharing this tip
Thank you sooooooo much for this, it’s frustrated me for ages! (To be honest in the past I’ve resorted to having two completely separate layouts; one for desktop with all the items on separate rows so they align vertically, and then another layout for mobile where they stack correctly image / text / button). Your solution is fantastic.
So glad I found this article. The instructions helped. Thank you very much.
Hi Sofian,
4 years later, but still works!
I had the exact same issue. When I read your article it really spoke out of my mind because I had the same thoughts and ideas with own rows, which didn’t workout because of the responsive behaviour. I first added a new row for the buttons which were just shown on desktop and the inner ones only shown on mobile. But your solution is much smoother and still works perfectly! Thanks a lot.
Hey Martin, yeah indeed, my last 4 years – actually 5 meanwhile – were totally dedicated to build up an online yoga academy, so I didn’t take time for own DIVI projects any longer. But finding so many grateful comments on my dusty website today I decided to bring it back to life. Glad to hear that most of the codes still work, it’s also because DIVI is simply coded so brilliant and sustainable. Wish you a great time!