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.
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.
I’ve done very little customizations to code before so I’m very new to this. Any support would be greatly appreciated!
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
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!
Hi @graceapollock ,
You can try the following steps:
- Step 1: Sale channel => Online Store => Themes => Edit code:
- 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!
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?
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!
