White band when monitor scale changes

Store Design
1

Hello all,

I’ve got an interesting problem.

I know the reason behind why the white band is appearing, but it bugs me that it is there and I cannot help myself seeking for some opinions.

So what happens is when my monitor scale is at 100% or 125% it produces the band that is not coded by me and funnily it disappears, when I do “inspect element“. But when I set my monitor scale (windows) 150% or up the white band disappears. Attached a screenshot for reference + Screenshot by Lightshot *Can’t add second screenshot, new user limitation.

with-whiteband
with-whiteband2878×300 830 Bytes

Thank you for all the advice in advance!

P.S I found a way to work around it, but I would like to find a true solution that would not require a workaround.

2

Hi @Titanas

Welcome to the community.

While is good that you share a screenshot, we could really use more a link to your store and if it is password protected, a password.

Because with this we can only guess. Maybe is background of section, maybe body element background. Maybe it is happening because of padding and so on…

3

What you’re describing sounds like a subpixel rendering / scaling issue rather than a problem directly in your theme’s code.

Here’s why it happens:

When your Windows display scaling is set at 100% or 125%, certain elements (especially background colors or images) may render with fractional pixel widths/heights.

The browser then “rounds” these values, which can leave a thin gap (white band) between sections.

At 150% scaling or higher, the calculations shift, so the rounding artifact disappears.

Things you can try for a true fix:

Check Section Backgrounds

Make sure your background colors or images cover the full width:

Check Section Backgrounds

  • Make sure your background colors or images cover the full width:

    background-color: #yourcolor;
background-size: cover;
background-repeat: no-repeat;

Force Pixel-Perfect Layouts

Add box-sizing: border-box; globally.

Avoid fractional widths (like 33.3333% in CSS) if possible — use calc() or fixed values where gaps appear.

Prevent Browser Rounding Gaps

Add a min-height or overflow: hidden to the parent container to ensure the child elements don’t misalign during scaling.

Test in Multiple Browsers

Sometimes Chrome shows the gap but Firefox doesn’t. This can help confirm it’s a rendering quirk, not your HTML/Liquid.

Unfortunately, these scaling artifacts are partly due to how browsers interpret fractional pixels on high-DPI screens — there’s no perfect universal fix, but with targeted CSS you can usually eliminate it entirely.

If you’d like, I can inspect your theme’s HTML/CSS directly and pinpoint exactly which section is causing the band so it’s fixed across all scaling levels — without relying on a workaround. I’ve done this for other Shopify stores where “phantom gaps” showed up only at certain resolutions.

2 Likes
4

Thank you @SkillUpDennis for the reply.

Indeed I’ve tried to view that page on the edge browser and the phantom gap is gone! :smiley: From your point of view, would you consider this to be an edge case, where there is not a lot of consumers that face such a problem or an opposite?

My only problem with this is, if the customer sees such a problem I would go with the route of making that page’s background color the same in order for it to not standout :smiley:

5

Thank you @Laza_Binaery for the reply, I believe @SkillUpDennis has the problem answered there for me.

1 Like
6

You’re welcome , a like will be appreciated

And the solution tag