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

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

Home Forums Support My buttons are not filling “fill horizontal space” – an idea why?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1583658
    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

    #1583661
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1583669
    Henry

    Added – thank you for taking a look

    #1583707
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1583791
    Henry

    I inserted the code…didn’t work πŸ™

    The CSS class is definitely there, I checked…

    Any ideas what could be wrong here?

    #1583829
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1583844
    Henry

    Unfortunately not working…I placed the code in multiple spots

    #1583848
    Henry

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

    #1583863
    Henry

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

    #1583884
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1583929
    Henry

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

    #1584006
    Elvin
    Staff
    Customer Support

    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. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.