Strange gap appearing on website [homepage and potentially others]

[djamesduke]

Hi Shopify community!

A potentially quick solve here but I’m not quite able to resolve myself.

Issue:

If you’re on my homepage [greenlabelglassware.com] and zoom out to around 50%, a big empty space appears between the collections and the footer. At further levels of zooming out, this space increases.

This space appears at random either above or below the collections.

I have included two screenshots of this issue below.

Initially I thought there could be a screen resolution break point which is making things look a bit funky, but my testing in chrome console wasn’t able to replicate it. I can only get it to appear when I zoom out using “cmd and -” on my mac.

My concern is that some users with larger resolution monitors are getting a poor experience. From Google analytics, there aren’t many using a high res but I thought I’d try to rectify anyways!

Expected behaviour:

I’m not exactly sure. But when I repeat the zooming out behaviour on other websites, e.g. Harrods (link: https://www.harrods.com/en-gb/shopping/boadicea-the-victorious-oud-sapphire-pure-perfume-100ml-20065040)) that seems like the right behaviour?

[Natasha-Saed]

Hi,

This is normal as the footer is fixed same as header on a fixed location what you see when you zoom out is the background color which is black it is not a gap, changing the device size allow you to see how to look on mobile and desktop use the google inspect to do so.

[djamesduke]

Hi there

Thanks for your message.

Why does the content load at the bottom of the div as well as the top? That’s the main problem here - I don’t want people coming to the site and only seeing a big blank space where the product collections should show

[Natasha-Saed]

You just need to add more content to acheive this, look at the demo you provided they have more content, try to add more sections then you will easily acheive the look you want on zoom in.

Just duplicated a few sections on the browser this is with zoom 50%.

And this is the websites you share when it is only with one section

Their backgound is white while your background is black.