Align Buttons in Divi Columns

[@MirkoMancini]

Your channel is a real gold mine for Divi users! Thanks! 🔝👍

[@divicoaching]

Thank you Mirko!

[@RodneyBlair-m3s]

Thank you, thank you, thank you!!! I have been searching for this solution for two days!

[@divicoaching]

Oh that's a long search! Glad you found my channel...

[@Youthman]

New subscriber. Your content is straight to the point and super useful

[@divicoaching]

Thank you, I really appreciate the feedback. Problem is I am now going to have to watch a load of vids on your channel as my old Onkyo 5.1 system needs an upgrade, and the TV, and the other TV...... 😀

[@melissamiller1328]

I just found you today! Your tutorials are AWESOME! Thank You!

[@divicoaching]

Well thank you!

[@HighSpiritsGuy]

Thank you for this tip. You are awesome!! ✅ The best part is that your videos are short and to the point. You never drag your videos unnecessarily. Thank you again 💐

[@divicoaching]

Thanks again Jaspreet!

[@BeFoundOnTheWeb]

Bookmarked

[@stariartandmore]

what would the CSS be for the same kind of thing with the button, but for a full width header?

[@divicoaching]

Not quite sure what you want to achieve? Can you give a bit more detail.

[@something4792]

Very very Helpful video , Thanks

[@divicoaching]

Thank you. Glad you found this helpful! Something that I found very frustrating at first.

[@wiredogs4449]

Thank you!

[@sabinevanerp]

Thank you so much for your Wonderfull tutorial!!

[@divicoaching]

Thanks Sabine. I am glad you found it helpful.

[@thunbo65]

This is very helpful. Best method I have seen so far. Thank you very much :)

[@divicoaching]

Thank you Rikke, glad you found this useful! 🙏

[@georgeg1933]

I have 4 text columns in my row with a button at the bottom of each column. In my button spacing margin , I have 40px for bottom margin and auto for top margin. My problem is that when I apply these button settings, my text columns go too long. What am i missing?

[@divicoaching]

Do you have a link? I have put a sample here demo.divicoaching.com/4columns/ You need to make sure you have followed all the steps - set row to "equal column heights". In COLUMN (not row!) CSS you need display:flex; flex-direction:column; Set top/bottom padding on the column to the amount of space you want above your text and below your button. Set top margin of the button to "auto". That should do it.

[@georgeg1933]

OK ,I finally got it. I have to thank you, your video was great and really helpful. Thank you for the quick response to my question!@@divicoaching

[@tjveach]

Perhaps a video on a fly out menu for mobile?

[@divicoaching]

Thank you. Mobile menus is definitely a topic I get asked about a lot.

[@Ibuywithpridellc]

nice work. very helpful. thank you

[@divicoaching]

Thank you. Glad you found it useful!

[@sharonlynnmcdermott]

Sorry, what I meant to say is that you talk about starting with a brand new installation of Wordpress and installed the Divi theme when you start a new tutorial. Are you keeping any of the work you've done before? When I first installed Wordpress, I had to do it from the back end, I wasn't able to do it the simple way as show in the installation video put out by WordPress. Have you had that experience?

[@divicoaching]

Hi Sharon. No I am killing of the old installation and literally re-installing WordPress. Much depends on your hosting, what access you have and how much techy stuff you want to get in to.

[@divicoaching]

Hi Sharon. I was in a bit if a hurry when I replied before and didn't really explain clearly how I start from scratch with a fresh install. As I manage my own server (a cloud VPS) when I create a new tutorial I create a new subdomain by adding a new 'A' record to the main divicoaching.com DNS - such as say header.divicoaching.com. This record points to the IP of my server. I then install a fresh copy of WordPress and Divi. Depending on your hosting it should be pretty easy to do something similar with a new subdomain.

[@itskamila_speaking]

Thank you! Very usefull!

[@divicoaching]

Glad it was helpful!

[@adamstockton67]

very clear tutorial thanks

[@divicoaching]

Glad you liked it!

[@jesschartrand6450]

I have been looking for a fix for this particular issue for longer than I'd like to admit. Thank you for all you do

[@divicoaching]

Pleased to have been able to help!

[@MrPjderks]

Great! Just needed this!

[@divicoaching]

Excellent. Glad this was useful.

[@chonafreedman]

Thank You for sharing info!

[@divicoaching]

Glad you found it useful.

[@linelightdesigns]

1 year to find this vid

[@divicoaching]

Well I'm pleased you did in the end 😀

[@AsitAithal]

Absolutely brilliant. I've watched all your videos. There are so many things I learned. Keep them coming.

[@divicoaching]

Thank you Asit. This is a new venture for me and there is a lot to learn about making videos. The feedback I have had from you and others has been so motivating I just want to keep making more.

[@AsitAithal]

@@divicoaching many (like me) are not aware of setting the margins as auto. I always have set them as px or %. Also, your videos show me the importance of mastering flex. I wish ET had a section in the advance tab called 'flex' and instead of entering css, I could toggle some switches. Of course, there are tons of properties to set. However, I'm talking about the most used.

[@divicoaching]

@@AsitAithal It's old, but have a read here - it is well explained. css-tricks.com/snippets/css/a-guide-to-flexbox/

[@rickusjansenvanrensburg2643]

Great! Helps 100%!

[@divicoaching]

Excellent.

[@reforesting]

Awesome. Thanks!

[@divicoaching]

You're welcome!

[@hamza-8547]

Great ! Thank you !

[@divicoaching]

Welcome! Glad you found it useful.

[@thosethoughtsdesign]

Life saver! Thank you for sharing!

[@TheBourneBlogger]

You 'da man. Thanks

[@divicoaching]

Thank you 🙏

[@MarkMadison]

Just love this

[@divicoaching]

Thanks Mark!

[@MaciekSmile]

I watched just one your tutorial and from now on you wil get allways thumb up in very first second, once I hear your voice :) Best tutorials! Thank you.

[@divicoaching]

Thank you. That is so kind!

[@BeFoundOnTheWeb]

Genius!

[@divicoaching]

Thank you! Easy when you know how.

[@slwznn9910]

i love u bro

[@divicoaching]

Welcome 🤗

[@euchoulis]

Great Tip !

[@divicoaching]

Thank you! It's an easy one but by far the best way to do this.

[@varnai]

Why can't hit the like button more times? :D this vid would deserve a 100 likes 😍😍

[@divicoaching]

Thank you! Too kind.

[@Guldhammer_DK]

Thank you for trying to help with something that Divi should have made easier for us a long time ago. A little advice for you - get a non-intrusive mouse highlighter, and beware of erratic mouse movements - the are so hard to follow with the eyes. Otherwise great stuff, good quality video, clear and bright sound, and a nice non-hurrying approach. Thank you.

[@divicoaching]

Thank you Keld - that is a great tip. I have seen others with mouse highlighters and keep meaning to look into it. This was my first video and looking back can see how annoying the flicking mouse is! I have been conscious of this in later videos and nearly have it under control! Thanks again. Paul.

[@Leneufcinqcergy]

Thank you

[@divicoaching]

Welcome!

[@jonasheinzerlingoxygenimag295]

Can't tell you how many times I've referred to your video. Thank you very much.

[@divicoaching]

You are welcome Glad you have found it useful.

[@xmazzaaa]

Thanks!

[@divicoaching]

Welcome!

[@webzflare]

Great tip. Brillient, just what I was looking for👍👍

[@divicoaching]

Glad it was what you needed!

[@sharonlynnmcdermott]

You do a brilliant job of explaining everything. Just so happens I was about to settle for my columns looking just OK when this video appeared in my feed. Now I can use this tutorial to make them look how I really want them to. Thank you so much for all the effort you put into your videos. All the best to you in the new year! I would be grateful if you did a video on re-loading a fresh copy of the Divi theme. How do you manage "Projects". Projects vs pages and how it is organized, when you are doing a new demo for a KZbin video. You sometimes say you loaded a fresh copy of Divi theme.

[@divicoaching]

Thanks Sharon! Pleased you found this useful and all the best to you too for 2023. I run a cloud server myself so it is easy for me to just delete everything and start afresh. I am looking at a 'getting started' video covering installation and setup of Divi. As for 'projects' these are just another content type like post or page that Elegant Themes has included to use if you want. I have personally never used it! If I want a custom data type I use the CPT plugin.

[@Tech-Dev]

Cheers for this tutorial.

[@hydro58]

Great tutorial - I have been trying to align images on bottom of 3 columns for tablet thru desktop screen sizes and nothing worked...until I found you. Thanks so much for posting this!!!

[@divicoaching]

Glad it helped! There's more on alignment in the centring vertically video which takes flexbox a little bit further.

[@ivansarecz]

I've tried this with pricing colums and it didn't work. :( The buttons are still not aligned. Would those be different columns?

[@divicoaching]

Using the pricing module?

[@deaconross2666]

Thank you, this video taught me how to align these buttons and also about extending the styles. Fantastic resource and the only one that actually worked for button alignment.

[@divicoaching]

Thank you. Glad you learned some new things.

[@vizdjdesign1789]

Thank you so much for the clear and simple instructions! Your video really helped me!

[@divicoaching]

Thank you! It is super to get feeback.

[@katiezech3088]

Thank you for taking the time to do these videos. Super helpful!

[@divicoaching]

Thank you Katie. I am pleased you find them useful. 😊

[@ssuth1893]

Love your tutorials - they are quick and to the point. I appreciate it greatly!

[@divicoaching]

Very happy to hear that! Thank you for the feedback.

[@silvana8877]

So surprisingly easy, elegant and very well explained. Thank you so very much! ❤

[@divicoaching]

Thank you! That is very kind.

[@BeYourOwnGraphicDesigner]

Brilliant! Clearly explained and easy to follow. Thank you.

[@divicoaching]

Thank you. Really pleased you found this useful!

[@julixoxoxo1]

Thank you, it works perfectly!!

[@divicoaching]

Excellent. Glad you found this useful.

[@creativeresauce]

This is one of the best tutorials I've ever come across! Thank you!

[@divicoaching]

Wow, thanks! That is very kind. And it is one of my shortest too!

[@badhonff8748]

it was very helpful mate.

[@divicoaching]

Thank you. Glad you found it useful.

[@tracyhall5415]

Very helpful and explained well

[@divicoaching]

Thank you for the feedback Tracy and glad you found this helpful!

[@longstaffemedia]

Just wondering why the divider leaves the row out of vision after theb flex is completed? thanks

[@divicoaching]

Hi David, not entirely sure of your question, can you elaborate a bit?

[@longstaffemedia]

@Divi Coaching - Build Great Websites with Divi thank you for getting back to me so quick, I have 3 column row and in each column structure with modules text header, divider, text body and a button. This film helped me with the base buttons however the divider moved to the left and out of view. My only workaround was to reset the divider sizing width from auto to 100%, this seems to have worked across the three application adjustments. Is that the only route or is there CSS to add to other modules in the column structure. Thank you - david

[@divicoaching]

@@longstaffemedia Hi I still am not sure where this is going wrong for you. I have created a 3 col row with heading-divider-text-button as you say and there are no issues with the divider. I just followed the steps in the video - equalise column height, display-flex CSS in the main area IN EACH COLUMN (not in the row). Finally "auto" space for the top margin and say 20px for the bottom on the button only.

[@cristianderiquer2696]

THanks a lot, it saved my day!!!! Really easy to understand.

[@divicoaching]

Thank you. Glad you found this useful.

[@cristianderiquer2696]

@@divicoaching Yes, and the most important, it is really well explained!!!

[@divicoaching]

I am trying to find time to make more and keeping it simple is very much key to what I want to achieve.

[@tinaauluck4682]

Great video - how do you do this in a blog module when you have 1 column though?

[@divicoaching]

I remember following this a while ago. Do you think I should make a vid on the subject? divi-sensei.com/blog/2017/11/07/equalize-blog-grid-column-height/

[@tinaauluck4682]

@@divicoaching Yes that would be great

[@yogarve_pamela]

Did you? Then I'm overlooking it...looking for this solution but for the blog overview page​@@divicoaching

[@siobhanburke8911]

Brilliant! Very Useful

[@divicoaching]

Glad it was helpful!

[@TheSadaao]

Super easy!! Thank you so much

[@divicoaching]

Thank you. Flex box is super useful for so many things. Once you start you end up using it everywhere.