6
How can I get my buttons aligned horizontally? (same x axis) (lemmy.world)
submitted 4 months ago by to c/wordpress@lemmy.world
13 comments fedilink hide all child comments
 

The home page for my site is looking like this so far. The only problem is that I can't get the buttons aligned horizontally.

The setup is a grid container containing 3 group items. Within each group is a H3 heading, paragraph, list items and a button. The buttons at the bottom should all line up.

There aren't many options in the actual editor for things like this. I've set the buttons to be centre justified and I've set the vertical alignment to "bottom".

I don't mind adding custom CSS in the sidebar for the blocks, but it would need to be responsive.

you are viewing a single comment's thread
view the rest of the comments
[–] 2 points 4 months ago* (last edited 4 months ago) (1 child)

Sweet, thanks!

Using this markup I think I was able to achieve what you were asking for:

.site-main .wp-block-group__inner-container {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}

.site-main .wp-block-group__inner-container .wp-block-buttons {
    margin-top: auto;
}

But this is not ideal, it's merely a quick and dirty proof of concept. I have a couple of follow up question, since It's a been a while I worked with WordPress:

  1. Is there a way to make the columns "stretch" because they currently don't fill their container:

    If there is, please remove the height: 100% css markup.

  2. Could you add a custom class to the columns? Otherwise the markup will apply to all columns on your site.

  3. Could you add a custom class to the button? Otherwise the markup will apply to all buttons on your site.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •
  • [–] [S] 2 points 4 months ago

    Oh wow, this works! Thank you so much!

    I'm not sure about columns stretching. I assume you mean within the Wordpress editor? In that case I don't think so, because it's a grid tool of sorts the user can't do much else with it.

    I well certainly add custom classes to contain the CSS you've given me. Thank you so, so much.

  • permalink
  • fedilink
  • source
  • parent