White space in middle of my pages

Store Design

Topic summary

  • Issue: After edits to the newsletter signup and footer code, noticeable white space appeared mid-page on desktop. Affected pages included the homepage initially, then the cart and sale collection pages. Images were attached to show the issue and results.

  • First fix: A helper advised adding custom code in theme.liquid (the main layout file) above the tag. This removed the gap on the homepage.

  • Remaining issue: White space persisted on the cart and sale pages. Another CSS snippet was suggested in theme.liquid near the end (above ) to set main#MainContent background to #F3EEE7 with !important.

  • Alternative approach: A different helper proposed adding CSS in Assets (main.css/base.css/theme.css) to set .shopify-section.section background to var(–gradient-background) with !important, noting it would affect all newly added sections. A result screenshot was shared.

  • Resolution: After being asked to share code screenshots, the user re-added the code correctly, realized a previous mistake, and confirmed the issue is fully fixed. No further actions pending; discussion resolved.

Summarized with AI on December 20. AI used: gpt-5.
1

I made some edits to the codes to the newletter sign up and footer and now there is some white spaces in my middle of my pages when im on desktop view, can anyone help me see whats wrong and how to fix it. I have attached some images on to here
site https://eb00a5-ab.myshopify.com/cart

jordan24640_0-1725571545189.png
jordan24640_0-1725571545189.png2303×1316 133 KB

2 Likes
2

Hey @jordan24640

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1725571876317.png
Moeed_0-1725571876317.png1302×916 77.5 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

That fixed the problem on the main page but I still see the white spaces in the cart page, sale pages,
https://eb00a5-ab.myshopify.com/cart
https://eb00a5-ab.myshopify.com/collections/sale

4

Hey @jordan24640

Keep the previous code and add this new code above in the end of theme.liquid file

main#MainContent {
    background: #F3EEE7 !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

I have added it but theres still seems to be white spacing on there

6

Hi @jordan24640

Are you adding some review app?

Do you like add the the background same in your theme? if it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.shopify-section.section {
    background: var(--gradient-background) !important;
}

And save.

Result:

Made4uoRibe_0-1725572833948.png
Made4uoRibe_0-1725572833948.png1872×795 31.9 KB

Note: The code will change all the section that you newly add.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
7

Share screenshot of the code because you haven’t added the code properly

1 Like
8

Thanks, I just added it again and saw my error previously. Now it works perfectly thank you very much

9

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like