[Resolved] Aligning text and image in columns for different screen sizes

Home Forums Support [Resolved] Aligning text and image in columns for different screen sizes

Home Forums Support Aligning text and image in columns for different screen sizes

  • This topic has 8 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1475919
    Johanna

    Hello!

    I’m having some trouble with our customer page. I use columns (x3) where i’ve added images, a text paragrapgh and a button. However,the elements are not aligned when viewing the page on different screen sizes.

    For example, when viewing the page on my macbook screen, it looks all fine, but when viewing the page on my big screen (1920×1080) it’s not aligned anymore.

    I’ve tried to add space between the elements so that it would even out, but it hasn’t really worked, maybe i haven’t just added enough space? or is there some other clever workaround for this?

    #1476156
    David
    Staff
    Customer Support
    #1476295
    Johanna

    Thanks for getting back to me!

    I added the custom CSS:

    .gb-same-height>.gb-grid-column>.gb-container>.gb-inside-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .gb-same-height>.gb-grid-column>.gb-container>.gb-inside-container>*:last-child {
        margin-top: auto;
    }

    and then added the “gb-same-height” in the advanced classes, but it didn’t work.

    It can be so that i added the CSS Class to the wrong element? (see image: the icon marked in black is where i added the class)

    or there is something else that’s wrong?

    #1476416
    David
    Staff
    Customer Support

    aaah it is working but the button isn’t the last element. Can you remove the Space Block from below the button?

    If you want to add some vertical space between rows then select the Grid Container and add some Vertical Gap.

    #1477974
    Johanna

    Hi again,

    I did as you said, i removed the space block underneath the button, so that the last element is the button.It’s still not aligned.

    Then i added the vertical gap to 100px, it added the gap in the bottom of the grid only (and not between the elements).

    I wonder if i’ve built the grid wrong somehow?

    I assume i’ve built it 3×1 grid, and i have just been filling up each square with a lot of content instead of having separe squares for each “package of element”. It should actually be 3×5.

    Could that be the problem here?

    #1478014
    Johanna

    should it be:

    Container
    -container
    -grid
    –elements
    +
    -container
    -grid
    –elements
    +
    -container
    -grid
    –elements
    .
    . (x5)

    meaning that there should be 5 grids, one grid for “each row”, since “grids” is treated more like columns rather than a grid in this case?

    don’t know if this makes sense to you.

    #1478038
    David
    Staff
    Customer Support

    Looks like you changed the structure – i am now seeing 3 columns with all your content stacked inside them. Each grid column needs to contain only the one ‘card’ content

    #1478078
    Johanna

    yes, that’s probably it.
    I will remake it.

    thanks for the support!

    #1478104
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.