[Resolved] Make row of buttons same size

[Author]

Posts

[davidF-23]

Hello - I have a grid with conditional buttons (links). Each button has different text, and the number of characters varies slightly.

I can't figure out how to make the buttons the same size regardless of how many characters there are. Also on mobile I have one button getting squished that I can't figure out.

I looked for some CSS but couldn't fix it. Let me know, thanks!

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I can share some CSS code examples, but, I'll need to see the page with these buttons. Can you please share the link where these buttons can be seen?

regards,
Waqar

[davidF-23]

Sure no problem, it's hidden link

[Waqar]

Thank you for sharing the link.

You can include the following custom CSS code in the template:

.wp-block-toolset-blocks-grid .tb-grid-column .tb-button .tb-button__link {
    width: 95%;
    height: 100%;
    padding: 0.7em 0.5em 0.5em;
    vertical-align: middle;
}

[davidF-23]

Thanks, that helped the width but now the text on the buttons is aligning towards the top:

[Waqar]

Thanks for the update.

I've checked buttons in Chrome, Safari, and in Firefox browsers, but the text appears to be centered correctly.
( screenshot: hidden link )

You can test this again after clearing all involved caches and feel free to adjust the top padding value '0.7em' in the code, as needed.

[davidF-23]

Thanks, that did the trick.