Remove white blocks from password page

Store Design
, , , ,

Topic summary

A user seeks to remove white blocks appearing at the top and bottom of their Shopify password page (runtheblade.com).

Proposed Solutions:

  • Solution 1: Add CSS to theme.css targeting .password-main-content and .password-enter to remove padding and gap properties using unset !important.

  • Solution 2: Add CSS to base.css or theme.css to:

    • Set body background to black with zero margin/padding
    • Make header and footer backgrounds transparent
    • This addresses default browser spacing that creates white gaps

Additional Troubleshooting:

  • Check theme settings under Layout or Page width to ensure background/content container colors match section colors if white edges persist.

Status: The discussion remains open with no confirmation from the original poster about whether either solution resolved the issue.

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

Hey my site is - runtheblade.com

i dont want the white blocks at the top and bottom of the site

Screenshot 2025-10-19 194432
Screenshot 2025-10-19 1944321481×882 73 KB

2

Add below code at the bottom of theme.css and after saving, the white blocks on password page will be reduced. You can have a try and see if it works:

<style>
.password-main-content {
padding-block-start: unset !important;
}
.password-enter {
gap: unset !important;
}
</style>
3

Have you solved the issue?

4

Hey @VicexGrips :waving_hand:

Those white blocks at the top and bottom of your site usually come from extra margin or padding on the body, header, or footer elements — depending on your theme setup.

Try adding this quick CSS fix in your base.css or theme.css file:

body {
  background-color: #000; /* match your black site background */
  margin: 0;
  padding: 0;
}

header, footer {
  background: transparent;
}

:white_check_mark: Why this works:

  • It removes default browser padding/margin that can create white gaps.

  • It ensures the background color matches your main site background.

  • The transparent header/footer removes any unwanted white blocks.

If you’re still seeing thin white edges, check your theme settings → Layout or Page width and make sure “background” or “content container” color matches your section color.

:hammer_and_wrench: You can check out our Shopify Partner profile — we’ve built and shared several free Shopify app solutions to help store owners. Feel free to explore our profile and see how our apps can make your Shopify experience better!