-
Justin35
I need to fix how this page’s top grid breaks on smaller devices to always stay in place the way it looks on a desktop (touching the top line)
https://ibb.co/PFxXLTz on desktop (the way it’s supposed to look)
https://ibb.co/FmCDD2q starting to break weirdly on a smaller screen
https://ibb.co/3rYXF6b now on tablet view it creates big gap from the menu border-line -
Fernando
Hi Justin,
In Appearance > Customize > Layout > Container, remove the top padding for all views.
-
Justin35
Nice that fixed it. I also had a similar problem like that on another page. The content in the grid item container border-line box I created aren’t staying in when you start breaking it down to smaller screens.
https://ibb.co/3rkXMhx -
Hi there,
the Grid column Containers in their Sizing settings you have a Height property set, and thats the problem.
Select the containers and one Mobile preview remove the height value -
Justin35
When I removed the height to zero on each container sizing setting on mobile view it laid them on top of each other even worse.
-
don’t put
0
– instead typeunset
this will override any height that is set for desktop or tablet.As a general rule, if you can Dom’t use Height unless you intend to have some kind of overflow.
Its better to use min-height. -
Justin35
Gotcha yea that did the trick. But on this size, the words fall out of the box and if I remove the top padding the words stay in but the border-line becomes unaligned with the other boxes.
https://ibb.co/3WDcTv1 -
Fernando
Hi Justin,
Just set the height of the Container Block to 100% instead of giving it a 250px value.
Reference: https://docs.generateblocks.com/article/equal-height-grid-containers/
-
Justin35
Perfect thanks!
-
Fernando
You’re welcome, Justin!
- You must be logged in to reply to this topic.