How to remove white space from product page?

Store Design

Topic summary

A user seeks help removing unwanted white space from their Shopify product page (plugmydrip.com).

Proposed Solutions:
Multiple community members provided CSS code snippets targeting .product-form__buy-buttons with negative top margins (ranging from -10px to -30px). The solutions involved:

  • Adding code to theme.liquid before the </body> tag
  • Inserting CSS into assets/theme.css or assets/base.css
  • Using media queries for responsive adjustments

Issue Resolution:
Initially, the user reported solutions weren’t working on desktop. After trying different code variations with adjusted margin values, the problem was eventually resolved. The discussion appears complete, with the final helper confirming the issue was fixed and requesting the user mark an accepted solution.

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

I want to remove this white space from my product page.

URL plugmydrip.com

IMG-20240601-WA0007.jpg
IMG-20240601-WA0007.jpg739×1600 98.2 KB

1 Like
2

Hello @Emiway

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .product-form__buy-buttons { margin-top: -1rem; } .product-form { row-gap: 0 !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hi @Emiway

  • Go to Online Store → Theme → Edit code.
  • Find the file assets/theme.css and paste the code below at the bottom of the file."
@media screen and (max-width: 749px){
.product-form__buy-buttons {
margin-top: -30px;
}
}

devcoders_0-1717240018670.png
devcoders_0-1717240018670.png514×533 20.9 KB

4

Hello @Emiway

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

@media screen and (max-width: 768px){
.product-form__buy-buttons {
   margin-top: -20px;
  }
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

5

Not Working On Dekstop

1 Like
6

Not Working On Dekstop ..

7

You can use this code instead

.product-form__buy-buttons {
   margin-top: -20px;
  }
8

Hi @Emiway

  • Go to Online Store → Theme → Edit code.
  • Find the file assets/theme.css and paste the code below at the bottom of the file.
.product-form__buy-buttons {
margin-top: -30px;
}

devcoders_0-1717249774195.png
devcoders_0-1717249774195.png1347×486 24.1 KB

9

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product-form__buy-buttons { margin-top: -3rem; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

10

Hi @Emiway

Great to hear that the issue has been resolved! If my assistance was helpful, please consider liking and accepting the solution. Feel free to reach out if you have any further questions.