- This topic has 8 replies, 2 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
October 7, 2020 at 12:59 am #1475919Johanna
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 #1476156DavidStaffCustomer SupportOctober 7, 2020 at 5:24 am #1476295JohannaThanks 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 #1476416DavidStaffCustomer 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.
October 8, 2020 at 1:21 am #1477974JohannaHi 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 #1478014Johannashould 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 #1478038DavidStaffCustomer 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
October 8, 2020 at 2:41 am #1478078Johannayes, that’s probably it.
I will remake it.thanks for the support!
October 8, 2020 at 3:00 am #1478104DavidStaffCustomer SupportLet us know !
-
AuthorPosts
- You must be logged in to reply to this topic.