Excessive White Space on Product Page - Envy Theme

graceapollock
Tourist
22 0 1

I'm trying to remove excess white space on our product pages and I'm running into two distinct issues. 

 

First, all of the sections seem to be surrounded by this "section.homepage-sections-wrapper.homepage-section-wrapper-white" that's 50px. I tried changing it to 0px in the theme.product.css (since I didn't want to edit it on the other pages) but it made no change. 

Screenshot 2024-04-30 at 12.16.25 PM.png

 

My other difficulty is a random chunk of white space that's unaccounted for that I'd like to delete. Here's a screenshot of me inspecting the element and you can see everything else is defined. It seems to be built into the Envy theme. This is only a problem on desktop for some reason, not mobile.

 

problem.png

 

I've done very little customizations to code before so I'm very new to this. Any support would be greatly appreciated!

Replies 6 (6)

sahilsharma9515
Shopify Partner
1031 128 193

Hi @graceapollock 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

 

Best regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


graceapollock
Tourist
22 0 1

Hi Sahil- I'd be more comfortable if I didn't share those. I understand that might make it harder to make a solution specific ideas but if you have any general ideas let me know and I'll gladly try them!

graceapollock
Tourist
22 0 1

The store URL is https://stablefeed.com/

BSSCommerce-B2B
Shopify Expert
462 84 101

Hi @graceapollock,

You can try the following steps:

 

- Step 1: Sale channel => Online Store => Themes => Edit code:

 

view.png

 

- Step 2: Search for theme.min.css and add the css directive to the end of this file:

 

.shopify-section .homepage-sections-wrapper, .shopify-section .homepage-sections-wrapper--white {
    padding: 0 !important;
}

 

- Step 3: in theme.min.css, press ctrl+F, then enter into the search box "shopify-product-reviews" it will display as follows

 

@media only screen and (min-width: 992px) {
    #shopify-product-reviews {
        margin-top: 90px !important;
    }
}

 

Then edit margin-top: 0

 

@media only screen and (min-width: 992px) {
    #shopify-product-reviews {
        margin-top: 0
    }
}

 

 

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
graceapollock
Tourist
22 0 1

Hi! I'm attaching a screenshot of my theme.min.css. It looked like I should make changes to the theme.css instead, so I made your adjustments there but I haven't noticed any changes. Should I do it on the theme.min.css instead, or is there something else I'm missing? 

 

Screenshot 2024-05-17 at 2.26.31 PM.png

 

graceapollock
Tourist
22 0 1

Also I'm not sure if I was clear in my original post/or if your code already addresses this but I don't want to remove the "section.homepage-sections-wrapper.homepage-section-wrapper-white" on every page. For example, it looks really nice on the home page, but on product pages, and sometimes customized pages it looks unnecessary. I'm not sure how to distinguish which pages it goes on and doesn't. Thanks again!