- This topic has 8 replies, 2 voices, and was last updated 4 months, 4 weeks ago by
David.
-
AuthorPosts
-
October 7, 2020 at 12:59 am #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?
October 7, 2020 at 3:49 am #1476156David
StaffCustomer SupportHi 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/October 7, 2020 at 5:24 am #1476295Johanna
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?
October 7, 2020 at 6:36 am #1476416David
StaffCustomer Supportaaah 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/October 8, 2020 at 1:21 am #1477974Johanna
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?
October 8, 2020 at 1:48 am #1478014Johanna
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.
October 8, 2020 at 2:00 am #1478038David
StaffCustomer SupportLooks 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/October 8, 2020 at 2:41 am #1478078Johanna
yes, that’s probably it.
I will remake it.thanks for the support!
October 8, 2020 at 3:00 am #1478104David
StaffCustomer SupportLet us know !
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.