Heading has a blank space

Technical Q&A
, , ,
1

Hi, when adding a new page to my Shopify store, I randomly have a blank section between my heading and title of page. It’s happening for my “wholesale” page and “contact us” page

image
image1920×2560 173 KB

3

The problem here is that an App adds a child to your sites <body> and it breaks the layout. Also you have an extra announcement bar..

Go to Customizer => Theme Settings (cog icon button) => Custom CSS and paste this code

html body {
  display: flex;
  flex-direction: column;
}

.shopify-section-group-footer-group {
  margin-top: auto;
}
5

hi, this didn’t do anything. When clicking on the blank space it says its apart of the header

6

hi this doesn’t do anything. Anytime I create a new page and click “view” this blank space comes up that’s attached to the header

7

Hey @Chvntelle

Do you have the page disabled? I see this when I land on the page.

image
image1891×904 44.5 KB

Let me know.

Best,
Moeed

9

Hi, ive just set both pages to visible

10

Hey @Chvntelle

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 </ body> tag
<style>
@media screen and (min-width: 768px) {
html, body {
    display: flex !important;
    flex-direction: column !important;
}
}
</style>

RESULT:

image
image1118×919 41.8 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

11

I appreciate this! Would you be able to show exactly where to find and place the code?

12

In the end of your theme.liquid file right above

Best,
Moeed

13

I see that you’ve added Moeeds code, so can’t say why mine did not work for you.
However, the second part, is important too.

What I see now:

Screenshot 2025-09-06 at 12.50.56 PM
Screenshot 2025-09-06 at 12.50.56 PM1129×1342 79.7 KB

Then I add the second part of my code:

.shopify-section-group-footer-group {
  margin-top: auto;
}

Screenshot 2025-09-06 at 12.51.04 PM
Screenshot 2025-09-06 at 12.51.04 PM1129×1342 106 KB

Would be interesting to see why my solution did not work for you. Avoiding theme code edits will make your future theme updates easy.

14

Hi Tim, appreciate for the help but I just added some extra padding to the bottom of the form and it was fine after!

15

Whatever suits you, but it will happen on any page which is shorter then your browser window. Also consider that some monitors are higher then others…