How can I eliminate the black space at the top of my pages?

Store Design
,

Topic summary

A user is experiencing unwanted black space appearing at the top of several pages on their Shopify store, including custom pages and the cart page.

Proposed Solutions:

Multiple respondents suggested CSS fixes targeting the .page-masthead or .page-title classes:

  • Adding margin-top: 0; or margin-top: initial; to the .page-title class
  • Setting .page-masthead { margin-top: 0 !important; } in the theme.css file
  • One suggestion recommended validating HTML for errors first using W3C validator
  • Another pointed to potential conflicting CSS rules around lines 1131-1230 in theme.css that convert margin-top to padding-top

Current Status:

The issue remains unresolved. The user reported that initial suggestions didn’t fix the black space on the cart page specifically, indicating the problem may require additional troubleshooting or a different CSS selector.

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

Hi there can someone help me please? I’ve noticed this black space at the top of a few pages how can i get rid of it?

thank you!

Dccomputers_0-1697243853652.png
Dccomputers_0-1697243853652.png1881×938 147 KB

https://directcomputers.co.uk/pages/intel-14th-gen-custom-pcs

https://directcomputers.co.uk/cart

2

Validated your website for html errors, https://validator.w3.org/

If you need this fixed for you then contact me by mail for services, Contact info in signature.

ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail.

For the /page use this for page-title’s in a custom css setting, or bottom of theme.css.

.page-title { margin-top:0; }

or to possibly help lower the amount of layout shifting (slower load rendering times)

.page-title { margin-top:initial; }

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

There are these rules in theme.css causing part of this maybe somewhere around link 1311 ~ 1320

Convert margin-top to padding-top and text.

@media screen and (min-width: 1024px) {
.site-page, .page-masthead, .page-content, .contact-page-content, .account-page, .account-page-masthead, .account-page-content {
    margin-top: 50px;
    margin-bottom: 50px;
}
}

.site-page, .page-masthead, .page-content, .contact-page-content, .account-page, .account-page-masthead, .account-page-content {
    margin-top: 30px;
    margin-bottom: 30px;
}
1 Like
3

Hello @Dccomputers :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file theme.css and add this code at the bottom

.site-page {
    margin-top: -20px;
}

.page-masthead {
    margin-top: 0;
}

The result

Screenshot 2023-10-14 at 09.19.29.png
Screenshot 2023-10-14 at 09.19.29.png787×216 11.8 KB

Hope that helps!

4

That doesn’t seem to do anything for the cart page https://directcomputers.co.uk/cart

5

Hi @Dccomputers

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

.page-masthead {
    margin-top: 0 !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly