How can I remove extra space on desktop!

Retired Boards Appdev Store Design

Topic summary

A user seeks to remove extra white space appearing on product pages, but only on desktop view for their Shopify store (moorekainley.com).

Solutions Provided:

  1. CSS injection method: Add custom CSS code in theme.liquid file above the </head> tag to target and reduce the spacing. Initially placing it above the head tag didn’t work, but positioning it below the head tag successfully resolved the issue.

  2. Alternative approach: Locate main-product.liquid file and directly adjust the margin-top property in the existing style code, specifically targeting .body.template-product.body-theme .page-container with a media query for desktop screens (min-width: 768px).

The issue was successfully resolved using the first method after correct code placement. Both solutions involve CSS modifications to control desktop-specific spacing on product pages.

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

How can I remove this extra space in the product page ONLY ON DESKTOP! Website: moorekainley.com

Screenshot 2024-08-11 at 7.55.25 PM.png
Screenshot 2024-08-11 at 7.55.25 PM.png2608×1244 176 KB

1 Like
2

Hi @omar_ab ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723426933404.png
BSSCommerceHDL_0-1723426933404.png1919×906 136 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

Pasted above the head tag, it did not work for some reason.

4

I put it below the head tag and it worked, thank you!

1 Like
5

@omar_ab , No problem. Have a good day :heart_eyes:

1 Like
6

Hi, there

Go to your online store- select your theme- edit code. find the main-product.liquid

find such style code and adjustmargin-top. or you could DM me to help you

EricHAN_0-1723429570009.png
EricHAN_0-1723429570009.png2670×1328 427 KB

@media screen and (min-width: 768px) {
body.template-product.body-theme .page-container {
margin-top: 8px !important;
}​
1 Like