Archived topic

Button alignment after WordPress 5.9 update

11 replies · Started by Scott on February 7, 2022

Viewing posts 1–12 of 12

February 7, 2022 at 4:49 pm #2108877

After the recent Wordpress update I'm seeing issues with buttons across 3 of my sites.

For sites 1 and 2, sets of two or more buttons aligned vertically now have no space between them. So each button is touching another, where previously there was a gap between each one.

For site 3, buttons that are Left Justified are now displayed as Centre Justified. In edit mode the buttons remain aligned left, but when viewing the published page they are centred.

February 7, 2022 at 5:33 pm #2108891

Hi Scott,

Can you clear cache and disable your cache plugin for us to inspect the sites?

Thanks!

February 7, 2022 at 7:27 pm #2108922

Hi Ying, all done.

February 7, 2022 at 9:16 pm #2108975

Hi Scott,

I can’t see any CSS with regards to spacing in websites 1 and 2. Can you try adding this CSS for both websites and see how it goes?:

.wp-block-column.is-vertically-aligned-bottom {
    display:flex;
    flex-direction:column;
    gap: 0.5em;
}

Kindly modify the gap value (0.5em) to your preferred value.

Moreover, as for the third website, can you try this CSS?:

.wp-block-buttons.is-vertical {
    align-items: flex-start;
}

Kindly let us know if this resolves the issue.

February 7, 2022 at 9:27 pm #2108981

Perfect, thanks Fernando!

February 8, 2022 at 2:53 am #2109190

You’re welcome Scott! Glad to have helped! Feel free to reach out anytime if any assistance is needed! :)

February 11, 2022 at 2:55 pm #2115016

Hi Fernando

I've just published a new post (link below) that has this same issue with button spacing.
Can you see any reason why the CSS wouldn't be working here?

February 12, 2022 at 5:58 am #2115512

Hi there,

i cannot see the original page you shared, but it looks like those buttons are set up differently to what you had before.
As you're using GenerateBlocks - why not use the GB Buttons Block?

It has all the controls built in, no CSS required:

https://docs.generateblocks.com/article/buttons-overview/

February 12, 2022 at 2:17 pm #2116092

Hi David
Thanks for the reply.

I've linked a page that originally had the same problem but has been fixed by the CSS.

I'm not using the GB Buttons block because almost the whole site was created before GB was released, and I'm keen to keep the buttons the same, as opposed to having a mix. And don't want to swap buttons on 400+ posts.

February 13, 2022 at 5:04 am #2116538

If you want a gap after all block buttons then try this CSS instead:

.wp-block-buttons {
    margin-bottom: 0.5em;
}

February 13, 2022 at 3:14 pm #2117126

That works, thanks!

February 14, 2022 at 3:51 am #2117651

Glad to hear that

This archived topic is closed to new replies.

Start building better websites today.