Help needed to remove white space below product image on cellphones in Debut

Store Design
1

I have searched for over 8 hours within this community to try to resolve my white space issue that happens only on cellphones when viewing my products. I get this HUGE white space below my picture and it looks terrible. I have tried all the codes listed here in the community and they either don’t work or they ruin my site. My website URL is: www.soapworksfactory.com. My site template is Debut and I could really use some help rewriting the whatever code is necessary. Here is a screenshot. Many thanks

here is the white space when viewed on cellphones
here is the white space when viewed on cellphones1170×2237 184 KB

1 Like
2

Hii @patriciah ,

Would you share your store URL so I can help you?

Thank You.

3

Thanks. My URL is what is shown in that photo…www.soapworksfactory.com. Many thanks!

4

@patriciah

Please add the following code at the bottom of your assets/theme.scss.liquid file.

Show More

.product-single__media{
height: auto !important;

}

Hope this works.

5

Thank you so very much! It worked brilliantly! OMG…I spent all of yesterday and 2.5 hours today trying all sorts of things. Thank you so very very much!

white space question solved.jpg
white space question solved.jpg1170×2298 214 KB

1 Like
6

Hii @patriciah ,

according to your desktop moad I think Your header take white space

Zworthkey_0-1633530947173.png
Zworthkey_0-1633530947173.png1353×222 20.6 KB

use this code In your Shopify Admin pannel Go to your Online Store-> Theme->Edit code then go to assets/theme.scss->paste the below code at the bottom of the file.

.site-nav--centered {
    padding-bottom: 0px;
}
.site-header.logo--center {
    padding-top: 0px;
}
.site-header__logo-image img {
    width: 100%;
    height: 72px;
}

Thank You.

7

thank you. That’s not my original question, but I’ll have to look into this next. I greatly appreciate your review! Take care!