[Resolved] Generateblocks button – how to fill vertical space in a container

Home Forums Support Generateblocks button – how to fill vertical space in a container

  • This topic has 11 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1374413
    Whelan

    Hi

    I’m trying to make a responsive grid of buttons with a background image. I want the buttons to that change colour when the user hovers over them. I can control the height of the container, but not the button. Some buttons have more text than others, so top padding is not consistent, because the text wraps differently at different screen widths.

    Is there some css to tell the button to fill the vertical space?

    In the link you can see the full spectrum grid and how it messes up when re-sized. It’s very complex, and needs simplifying, I just want to know if it’s possible for the colour to fill the space, i.e. using css flex?

    #1374575
    David
    Staff
    Customer Support

    Hi there,

    Can you Select the Grid block parent container:
    https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

    Set the Vertical Alignment to Default – this ensures the inner columns remain the same height. We’ll correct alignment separately.
    Give the block an Advanced > Additional CSS class of forced-height

    Then let me know so i can look at the CSS required.

    BTW Clickable containers will be a feature in GB Pro 🙂

    #1375024
    Whelan

    Hi David

    I’ve made the changes as you suggested.

    If it’s helpful, I’ve created a login for you and Simple CSS enabled on that page

    How can I send you the login privately?

    Mike

    #1375033
    Whelan

    Also… when do you think GB Pro will be released?

    #1375279
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can send login through our contact form: https://generatepress.com/contact

    Just be sure to mention this topic.

    Working hard to get GB Pro done – hoping first half of August.

    #1375596
    David
    Staff
    Customer Support

    Well its got me stumped….
    Although i am not 100% sure its possible, what makes it really difficult is the layout.

    To start there is the main Container with the class frozen.

    The first nested block within that container ‘the Full Spectrum heading’ is in a Lone Column Block – which shouldn’t exist outside of a grid – thats something that should not happen.

    Then there is a 4 column grid, each of the first 3 column has another Container block inside it with a 2 column grid inside that which finally has the buttons block inside of them…..

    Not sure what the 4th column is doing but it contains a spacer…

    Ideally you would create 2 x Container Blocks:

    Container 1 – add your Full Spectrum Headline.
    Container 2 – add a Grid Block with 6 columns. Add a button block inside each column.

    That would make it a lot easier to resolve this issue and no doubt a lot easier to maintain in the future. Let us know.

    #1408264
    Whelan

    Hello again

    Apologies for my slow reply. I’ve simplified the grid slightly, and added the “forced-height” class… but my preference is to have nested grids so that each of the three background images can span two columns. Is that the problem?

    #1408537
    David
    Staff
    Customer Support

    No problems.
    Thanks for explaining the nested grids. That makes sense although it does make a complex layout.
    If it weren’t for the nesting you can force same height columns by leaving the Grid Parent vertical alignment to default. However nested grids behave independently of their parent.

    The only simple fix i can see is forcing a min height on the innermost containers like so:

    .gb-grid-wrapper.forced-height>.gb-grid-column>.gb-container .gb-inside-container {
        height: 100%;
        min-height: 270px;
    }
    #1408892
    Whelan

    OK, your forced height fix works pretty well. Thanks

    PS I agree it’s an over-complicated layout which I won’t be repeating.

    #1409168
    David
    Staff
    Customer Support

    I must say it looks great. Great to see what you have done with GenerateBlocks so soon after its release. Really inspiring.

    GB Pro will make some of this easier as it will add clickable link function to Containers. So any container can be a ‘button’

    #1409173
    Whelan

    Thanks. I’m looking forward to GB Pro’s containers as buttons feature

    #1409206
    David
    Staff
    Customer Support

    You’re welcome – lots of good stuff coming real soon 🙂

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