White space on the right side of product pages & sticky header issue (Dawn 15.4)

Store Design
, ,

Topic summary

A user encountered white space appearing on the right side of product pages in mobile view on their Dawn 15.4 theme store. Their initial fix using overflow-x: hidden on html and body elements removed the white space but broke the sticky header functionality.

Root Cause:
A video element (.video-custom video) was extending beyond the viewport width, causing horizontal overflow.

Solutions Provided:

  • Use overflow: clip instead of overflow: hidden (doesn’t break position: sticky)
  • Apply overflow rules to child elements like main rather than html/body
  • Target the specific problematic element with max-width: 100%

Resolution:
The issue was resolved by applying .video-custom video { max-width: 100%; } which prevented the video from exceeding viewport width. The user confirmed this CSS fix worked successfully while maintaining sticky header functionality.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hello there!

I’m having an issue on the product pages of my website — there’s a white space appearing on the right side in the mobile version.

I previously used this code, which initially worked:

html, body {
  overflow-x: hidden !important;
}

However, I later noticed that it interfered with my sticky header — after applying it, the sticky header stopped working properly.

Could anyone please help me find a way to remove the white space without affecting the header?

I’d really appreciate any advice!

Product page example: Original Hand-Painted Pomegranate Oil Painting – DrawWithDi

5456429291991596539
5456429291991596539575×1280 128 KB

1 Like
2

Yes, setting overfow:hidden; is known to break the position:sticky;

You can try things like:

  1. Use overflow: clip; instead – this one does not break sticky;
  2. Use overflow: hidden; not on html and body, but on their children, say:
main {
  overflow-x: hidden;
}

But ideally, add CSS to prevent elements to grow beyond the right window border…
In this case,

.video-custom video {
  max-width: 100%;
}

Should fix it.

1 Like
3

Hey! That usually happens when an element on the product page (like an image container or a section) has a fixed width larger than the viewport — causing horizontal scrolling.

Instead of hiding the overflow (which breaks sticky headers), you can try this approach:

body {
  overflow-x: clip;
}

Or, even better, use the Chrome inspector on mobile view to find which element is causing the overflow — it’s often something like .product-media or .slideshow__slide.

Once you spot it, add:

selector {
  max-width: 100vw;
  overflow-x: hidden;
}

Which theme are you using? I can tell you exactly which section might be pushing that white space.

1 Like
5

You can try things like:

body {
  width: 100%;
}
1 Like
6

Hi, thank you for your reply! I’m using DAWN 15.4. Could you help me figure out what is causing this white space? Would greatly appreciate!

7

Hi, thank you so much for your reply and help! That CSS worked perfectly! :star_struck:

1 Like
8

Have it later worked out?