how can I get rid of the white boxes on the dawn theme 404 page

Technical Q&A

Topic summary

A user is experiencing unwanted white boxes appearing on their Dawn theme’s 404 error page and seeks a solution to remove them.

Issue Details:

  • The user has already attempted adjusting padding values without success
  • An attached screenshot shows the visual problem on the 404 page

Proposed Solution:
A technical response explains the white space exists because the page body is set to min-height: 100% to keep the footer at the bottom. To remove the white boxes:

  1. Go to Online Store → Themes → Edit code
  2. Open /sections/main-404.liquid
  3. Add this CSS after the opening <style> tag:
body {
  min-height: auto;
}

Trade-off: Removing this padding will cause the footer to move upward, potentially leaving empty space at the bottom when content is minimal.

The discussion remains open as the original poster has not confirmed whether they implemented the solution or if it resolved their issue.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

pretty new to shopify so I’m not really sure how to get rid of this and I’ve tried the padding values already so maybe with code?

Screenshot 2025-01-17 074920.jpg
Screenshot 2025-01-17 074920.jpg2505×1212 107 KB

2

Hi @Spawn1

Please share the store url and password so I can take a closer look at the issue

Best,

Daisy

3

Hello,

This issue occurs because the page body is set to always span 100% of the height, which ensures the footer stays at the bottom of the page, even if there’s minimal content. Removing this padding will shift the footer upward, leaving empty space at the bottom of the screen.

If this is the outcome you’re looking for, here’s what you need to do:

  1. Navigate to Online Store → Themes → Edit code.
  2. Open the file located at /sections/main-404.liquid.
  3. At the top of the file, you should find a tag. Insert the following code right after :
body {
  min-height: auto;
}