Centering Buttons in a row/column?

Support
#1

On my website, I’d like to center the buttons under "Grow Old Gracefully.

http://galandgeezer.wpengine.com/

I’d like them to be centered horizontally & vertically within the box next to the text. I can play with the padding/margin, but I believe that’s messing up my mobile responsiveness.

I’d like to center the buttons, but have them also be centered when I pull up the site on mobile. What’s the best way to do this?

#2

Hello @Williamsps1,

Thanks for asking. :slight_smile:

Open the column that’s holding button element and under Setup > Element CSS add following CSS:

$el{
    display: flex;
    justify-content: center;
    margin-right: 1%;
}

If you would like to learn CSS and concurrently speed up development process then you can take a look at following resources.

Thanks.

#3

Thanks for the reply. That centers it horizontally, but not vertically. How can I make it center in the box both vertically & horizontally?

#4

It also causes some really big problems on the mobile site. It looks terrible on mobile now.

#5

Hi again,

Please follow https://css-tricks.com/centering-css-complete-guide/ and see Both Horizontally and Vertically section.

Hope this helps!

#6

It worked. Looks great on web, still terrible on mobile though.

#7

Hello There,

To fix the issue in mobile screens, please have the given code updated and use this instead:

@media(min-width: 980px){
  $el{
    display: flex;
    justify-content: center;
    margin-right: 1%;
  }
}

We would loved to know if this has work for you. Thank you.

#8

It appears to have worked! Thanks.

I did add an “align-items: center;” css so that they’d be aligned vertically as well. Thank you guys for all the help, looks much better now.

#9

Glad to hear it’s sorted!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.