Aligning text and image in columns for different screen sizes

[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?

[David]

Hi there,

try the solution i provide here:

https://generatepress.com/forums/topic/same-height/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Johanna]

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

thanks for the support!

[David]

Let us know !

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts