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.

all 13 comments

sorted by: hot top controversial new old
[–] 3 points 4 months ago* (1 child)

                                                  

That should do it

  • permalink
  • fedilink
  • source
  • hideshow 1 child comment
    •
  • [–] [S] 1 point 4 months ago

    If I could get a job as the guy who lays  s - sort of like a brick layer - I think I could have enjoyed web development. Thanks, that looks like you've sized it about right :)

  • permalink
  • fedilink
  • source
  • parent
    • [–] 2 points 4 months ago* (last edited 4 months ago) (3 children)

    Could we get a link to it so we can inspect the markup?

    I'm a web developer so I feel confident I can get it the way for requested.

  • permalink
  • fedilink
  • source
  • hideshow 3 child comments
    •
  • [–] [S] 2 points 4 months ago* (last edited 4 months ago) (2 children)

    I appreciate that. Here's a temporary link since I'm working locally for now. See what you think:

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child 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
    • [–] 1 point 4 months ago* (6 children)

    This is largely a flexbox question:

    https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox

    Have to make sure the parent element of the text and buttons is set to an appropriate display:flex and is also taking up the full height of the grid item though (if it’s not just the grid item itself).

  • permalink
  • fedilink
  • source
  • hideshow 6 child comments
    •
  • [–] [S] 1 point 4 months ago* (last edited 4 months ago) (5 children)

    Thanks. It appears to be a grid layout as opposed to flex in this case, however.

    Edit: you know what, I've just made sure that each section has the same amount of text. Not ideal, but it solves the issue quickly.

    Edit 2: That actually only works in very specific screen widths actually, so not a solution. I'm kind of surprised the graphical editor hasn't solved this issue. I remember dealing with it back around 2013 and assumed it would be handled by now lol.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 5 child comments
    •
  • [–] 2 points 4 months ago* (last edited 4 months ago) (4 children)

    You can set the grid item to display: flex, they’re not totally mutually exclusive (one can be within the other). Kinda hard to blindly walk through stuff like this without seeing the HTML/CSS though.

    One of those cases where browser dev tools are your friend as it should only need a few properties, you can poke and prod to see how they land, and you can see whether you’re getting a 100% height fill on the parent.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 4 child comments
    •
  • [–] [S] 1 point 4 months ago (3 children)

    Thanks, I appreciate the helpful reply. I'll try that, and if I don't figure it out I can always hire someone to tidy up loose ends like this once the overall design is finished. Happy to send the work your way if you do that kind of think. I've used Upwork previously.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 3 child comments
    •
  • [–] 2 points 4 months ago (1 child)

    Might’ve missed this with my edit timing:

    This snarky comment is the one that actually shows what you need in full though.

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

    That looks exactly like my situation, thank you! This might actually let me use the default Wordpress blocks as I am currently and apply CSS in the side-bar custom CSS box for each element. I was hoping not to write custom HTML so that the "client" (my friend) can take it over when I'm done.

  • permalink
  • fedilink
  • source
  • parent