[Resolved] iPad grid problems

Home Forums Support [Resolved] iPad grid problems

Home Forums Support iPad grid problems

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1575399
    Ben

    Hi,
    I’m using a container with GenerateBlocks to make a grid, 4 columns, each column has another container with text in and a button. It all works great on mobile and desktop, on desktop the columns are all equal length and on mobile they turn into rows, one above the other. But on the iPad I can’t get the columns to be equal length, and depending on orientation of the iPad, the problem column changes. You can see iPad screenshots here:


    And the original page here: https://www.notesinspanish.com/ – scroll down a little to see the boxes.

    Is there a best practice for this kind of thing with the iPad, to ensure the columns are the same length? How can I fix this? I’ve played around with padding and margins settings in the containers for tablet but can’t get it right. Many thanks in advance for your help. Ben

    #1575507
    Elvin
    Staff
    Customer Support

    Hi,

    Have you set the Grid Block’s Vertical Alignment to anything other than “Default”?

    If you want the Grid Block’s columns to have the same height, you must set the Grid Block’s Vertical Alignment setting to default.

    Else, they will align depending on what you’ve set in it. (Top, Center or Bottom)

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

    #1579370
    Ben

    Hi Elvin, Sorry for the delay in replying. Yes, I have set the Grid Block’s Vertical Alignment setting to default for tablet, but the issue persists. Also I’ve tried setting a minimum height for each container in the grid block, and again, the problem is there. Is there anything else I can try? Thanks.

    #1579459
    Elvin
    Staff
    Customer Support

    You can try this:

    Add equal-height-grid class to your Grid Block’s CSS classes on its advanced setting.

    You can then add this CSS:

    .equal-height-grid .gb-inside-container, .gb-container {
        height: 100%;
    }
    .equal-height-grid .gb-button-wrapper {
        margin-top: auto;
    }
    .equal-height-grid .gb-inside-container {
        display: flex;
        flex-direction: column;
    }

    This ensures the contents occupy 100% of the ancestor’s height and pushes the button down to the bottom.

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

    #1583898
    Ben

    Elvin, you are a genius 🙂 That solved it, thank you so much!

    #1583921
    Elvin
    Staff
    Customer Support

    Elvin, you are a genius 🙂 That solved it, thank you so much!

    No problem. Glad to be of any help. 😀

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

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