Extremely wide white space on Account and Cart page Under the top banner and above the Heading

Technical Q&A
, , ,
1

There are extremely wide white space on Account and Cart page under the narrow black banner and above the heading; As the following images show:

IMG_3327
IMG_33271920Ă—1440 151 KB
the space is correct at home page and all others from Safari view;

IMG_3326
IMG_33262110Ă—1582 483 KB

p2. Account page, there are a wide white space

IMG_3325
IMG_33251920Ă—1440 122 KB

p3. The white space is even larger on Cart page, the interesting thing is I put a product in the Cart, the white space turns narrow;

The same thing also happen on Google Chrome as below:

IMG_3329
IMG_33291920Ă—1440 130 KB

IMG_3328
IMG_33282110Ă—1582 484 KB

Mobile vision is same but not as significant as on desktop. I tried to add CSS code but it only change space on other pages, 0 affect on the white space. Does anyone know what’s the reason of the issue and how to fix it? Thanks!

1 Like
2

Try this

Some extra elements were added as direct children of <body> on your store. The solution is still the same:

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;
}

Do not edit your theme code – this will prevent future theme updates.

3

Hey @kyle6661

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>
html, body {
    height: auto !important;
}
</style>

RESULT:

image
image1624Ă—543 28.6 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

1 Like
4

It shows .shopify-section-group-footer-group does’t appear to be used in this section after paste the code in Custom CSS.

5

Thanks Moeed! That the best solution for such issue, easy and quick apply. Thank you so much!

1 Like
6

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.

7

Screen Shot 2025-09-08 at 6.04.08 pm
Screen Shot 2025-09-08 at 6.04.08 pm2194Ă—1346 173 KB
Hi Moeed, the code is work perfect well to remove the upper white space; thanks; but after I apply the code, the footer on Account/Cart page move up as show on the screenshot, It seems footer on all other pages remain same nut only on these 2 pages moved up.

8

As I wrote n my original message, the code should go to “Theme Settings”=> “Custom CSS”.
Not in “Section settings”=> “Custom CSS”.

With my code, the footer is at the bottom of the window.
Also, editing theme code will make it difficult to update to future theme versions, while using theme settings would not.

(You’d need to remove the Moeed’s code though for it to work)