how do I reduce all this blank spaces in my product page?

Solved

how do I reduce all this blank spaces in my product page?

Mdb_Gioto
Excursionist
46 0 14

I'd like to reduce all this blank spaces in my product page...

Can you help me?

this is my link: https://vomeroitaly.com/products/little-benjamin?variant=45881848791307

Screenshot 2024-12-20 at 13.56.26.png

 

Thanks a lot

Accepted Solution (1)

Moeed
Shopify Partner
6533 1774 2146

This is an accepted solution.

Hey @Mdb_Gioto 

 

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>
.product-form .quantity-submit-row .quantity-submit-row__submit {
    margin-top: 0 !important;
}
.quantity-submit-row.input-row {
    margin-top: 0 !important;
}
.buy-buttons-row {
    margin-top: 0 !important;
}
.input-row {
    margin-bottom: 0 !important;
}
</style>

RESULT:

Moeed_0-1734700349886.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
6533 1774 2146

This is an accepted solution.

Hey @Mdb_Gioto 

 

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>
.product-form .quantity-submit-row .quantity-submit-row__submit {
    margin-top: 0 !important;
}
.quantity-submit-row.input-row {
    margin-top: 0 !important;
}
.buy-buttons-row {
    margin-top: 0 !important;
}
.input-row {
    margin-bottom: 0 !important;
}
</style>

RESULT:

Moeed_0-1734700349886.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


qasim-devloper
Shopify Partner
102 7 17

Hey @Mdb_Gioto this is Qasim a Sr. Shopiy Developer.
In order to remove the extra spaces in your Product page on Mobile view then please paste this code in your style.css file

@media only screen and (max-width: 767px){
.input-row {
  margin-bottom: 0px !important;
}
.buy-buttons-row {
  margin: -30px 0px !important;
  padding: 0 !important;
}
}

In the edit code and search for style.css file. At the end paste the provided code.

- Need a Shopify Specialist? Chat on WhatsApp +923289643774

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

websensepro
Shopify Partner
1739 196 235

Hi @Mdb_Gioto 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

 

.input-row {
    margin: 0 !important;
}
.not-in-quickbuy {
    position: relative;
    top: 1px;
}
.product-form .quantity-submit-row .quantity-submit-row__submit {
    margin-top: -41px !important;
}

 

 Result:

websensepro_0-1734700750118.png

 

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP