How do eliminate white spaces around my product photos?

Technical Q&A
1

I am using debutify theme for my store and I also attached a picture here. I want this to change only in my phone version but not in pc/laptop version. I would really appreciate if you guys can help me out here.

242387729_256790042993289_7448607171097284448_n.jpg
242387729_256790042993289_7448607171097284448_n.jpg540×840 36.3 KB

2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hi @sohelahmed ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (max-width: 769px){
.product-single .box {
padding-top: 0px !important;
}
}

Hope it helps

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

4

Hi, it only removed white spaces from the top. And there is still white spaces left on both sides of the product pictures. I tried using the command padding-left=0px; it didn’t work. Is there any other way available please help me out here.

5

Always backup your theme before making changes

Because a slideshow is involved you may also need to edit that slideshows config that may have a padding or size setting.

@sohelahmed try the following in a test theme, though note because a slideshow is involved you may be creating a user experience issue with scrolling so you’d be better off a/b testing this to be sure bounce rates don’t increase.

@media screen and (max-width: 769px)
.wrapper {
    padding-left: 0px;
    padding-right: 0px;
}

If you want paid support contact me at paull.newton+shopifyforums@gmail.com

6

Hi @sohelahmed ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (max-width: 769px){
.product-single .wrapper {
padding-left: 0;
padding-right: 0;
}
.product-single .product-single__meta–wrapper{
padding-left: 16px;
padding-right: 16px;
}
}

Hope it helps.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.