I am honestly going crazy. I feel like what I am trying to do is simple but I cannot do it.
I want a grid that never extends passed the viewport height. Basically I dont want my homepage to scroll.
I want the content INSIDE the grid to stay inside the grid and scale accordingly.
I don’t want the content to be cut off by the grid and I dont want the content to push outside the grid.
I currently have a section set to 100VH with 30 pixels padding.
I think set the grid to 100% (although any % doesn’t seem to make a difference.
In my mind this means I should have a section that fills the screen and keeps content inside it with 30 pixels padding on the edge.
This does not seem to be the case.
Someone please save me.
Website Link
https://preview.webflow.com/preview/kieran-lewis?utm_medium=preview_link&utm_source=designer&utm_content=kieran-lewis&preview=c021fd3dcc96b76f5c2122809b1972b5&pageId=661f17f37511c08ac3e575af&workflow=preview
Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])
Hi Kieran,
The Problem is that you have to much text in the elements. Once you reduce the text, the grid will become smaller, but also you need to set the Images “Position” to Manual and Span it across all 3 Rows with a Max-Height of 100%.
I have recreated it, with a new Grid with all 3 Rows set to height Auto, so they adjust. What you can also do is set them to “Min-Content”, then it will use the minimum Amount of space it needs for the text.
The Grid you leave at Max-Height of 100% and you can set the Overflow to Hidden.
Hope this helps you somewhat.
Good Luck!
You have saved me, thank you so much
1 Like
