How do eliminate white spaces around my product photos?

Solved
sohelahmed
New Member
2 0 0

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

 

0 Likes
Pallavi
Shopify Expert
2383 397 515

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
sohelahmed
New Member
2 0 0

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.

0 Likes
PaulNewton
Shopify Partner
3092 190 569

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 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes

This is an accepted solution.

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes