[Resolved] My buttons are not filling “fill horizontal space” – an idea why?

[Henry]

Please see this setting: screenshot – this is NOT going flush to the sides of the grid. Any idea why?

Here’s the client view.

Thanks

[Elvin]

Hi,

Can you link us to the page in question? To check why this is occurring.

You can provide the site details on the private information text field. Thank you.

[Henry]

Added – thank you for taking a look

[Elvin]

To clarify:

I believe something like this is what you’re trying to do? https://share.getcloudapp.com/ApuGxGo1

If so, here’s how you can do it.

Add this CSS:

.full-width-button{ 
width:100%; 
max-width:100%; 
}

You then add full-width-button on the GB Button’s class so all buttons would have a uniform width (occupy the width of the grid column) instead of being smaller or bigger(overflow) than the column.

[Henry]

I inserted the code…didn’t work 🙁

The CSS class is definitely there, I checked…

Any ideas what could be wrong here?

[Elvin]

Out of interest – why didn’t it work for me? I thought that feature would make the button go 100%

To shed light on the issue.

By default, the button’s width depends on its content w/c is usually the width of the text + button’s padding.

What happens on your grid is that since, the months have different string length, the width also varies.

Also, some of the buttons overflows past its container. It affects the visual balance/alignment.

To confirm: is the proposed fix not working? Let us know.

[Henry]

Unfortunately not working…I placed the code in multiple spots

[Henry]

Here’s the screenshot for where I put the css class: screenshot

[Henry]

Also – (sorry for flurry of comments) – maybe my approach is wrong with a grid for buttons?

[Elvin]

Also – (sorry for flurry of comments) – maybe my approach is wrong with a grid for buttons?

Ah I know why. And my bad for not spotting it earlier. lol.

The issue here is that the horizontal space for a 6 column grid to work well is too narrow. (max-width: 900px)

All the buttons are actually going full width of the column but some of them are overflowing because some name of the months are too long.

You can test this yourself by changing the max-width of the content area.

[Henry]

Yes – fantastic! Thanks very much – in fact, looks better with the x4 rather than x6

[Elvin]

Yes – fantastic! Thanks very much – in fact, looks better with the x4 rather than x6

Nice one. Good choice, that’s actually more manageable.

No problem. 🙂

[Author]

Posts