100% or 100VH, not full screen on some

Hey all,

Would love to get some help with this. I’ve read online with a few post which is similar but can’t seem to get it working.

On my computer and changing specs, everything seems fine, but after sending the link to some friends and family to review, some have come back saying the bottom bit; second row with text and below, has been cut off.

View the cut off bit:

I’ve tried playing aorund with the VH and %, but those who don’t have it working can only view the full page at 80% zoom by fixing their browser.

How I would hope it looks:

Is there a way to fix this?

Thanks :slight_smile:


Link: (Webflow - Levina's Wang)

hi @Levina and welcome to forum. Firstly you have grid container wrapped in Section Fixed where you have explicitly set its height to 80vh. I do not understand why you have positionfixed on this section so would not comment on it.

Next you have your images that has original width 600px set into 3 columns (each roughly 400px) so height will be 400px as they are squares. You have 2 rows mean 800px + gap. if the height of your fiend laptop will be smaller due resolution or size of browser window the bottom will be “cut off”.

When you have 80vh you should accommodate inside elements the way they do not exceed you can use e. max-width of parent element etc.

Another thing is that you contact has animation that reveals on scroll when is roughly in middle of screen. So revisit this animation to make it visible when you need.

I will suggest to learn more about web development to be familiar how things works and after you will be flawless in designing and setting web components together with responsiveness in mind.