Excessive White Space on Product Page - Envy Theme

graceapollock
New Member
10 0 0

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
976 122 183

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
New Member
10 0 0

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
New Member
10 0 0

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

BSS-TechFusion
Shopify Expert
139 26 15

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

graceapollock
New Member
10 0 0

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
New Member
10 0 0

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!