Surprisingly appearing empty white spaces between body and footer on desktop

Store Design
, , , ,

Topic summary

Intermittent empty white space appeared between body and footer on desktop (not mobile) on specific pages (product, contact) after customizing the Dawn theme for a dark background. OP had added global CSS (background-color and text color) in both the Custom CSS field and base.css. Images were shared to illustrate the gap; a site link was provided for live viewing.

Another participant reported a similar gap above the header.

Proposed fix: edit the theme.liquid file and paste a provided code snippet directly below the tag (the layout head section in HTML). The exact code was referenced via screenshot but not shown in the text; the instruction was to use the code indicated by the responder.

Outcome: the OP confirmed the fix resolved the issue. A second participant applied the change and plans to monitor due to the issue’s intermittent nature.

Status: resolved for the OP; underlying root cause not explicitly identified. Images were central to understanding the visual issue; the specific code snippet is not included in the discussion text.

Summarized with AI on January 6. AI used: gpt-5.
1

Hello there guys!

I habe a problem with suddenly appearing empty white spaces on specific pages, which disappear when reloading sometimes..

They appear for example on the products page and on the contact page and look like this:

products.JPG
products.JPG1544×808 70.7 KB

contact.JPG
contact.JPG1836×985 51.9 KB

Maybe you can see it by yourself:

https://www.fiveprayers.de

I chose the “dawn” theme and configurated it a little bit. The Theme is Nr. 4 (with the black background) but on some pages, the background stayed white. So i added this code to the “custom css” field:

{
background-color: #0d0b0c;
}
h1 {
color: #c4c4c4;
}
{
color: #c4c4c4;
}

I added that code also to the last line of base.css

On the preview on shopify everything works great, on mobile too (as i saw), but on desktop sometimes these empty spaces appear.

Do anybody know how i can get rid of them?

Thanks in advance

Attila

2

I have the same problem above header

3

Hey @real_Maestro ,

This was the problem, to fix:

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706888016859.jpeg
ThePrimeWeb_0-1706888016859.jpeg1253×933 87.9 KB

2 Likes
4

Just followed above, since this was an intermittent problem I will observe over the next few days. Thank you for the suggestion

5

Thank you very much, the problem is fixed!

Have a nice day i appreciate your help very much