Remove margins outside product photos

Remove margins outside product photos

MiguelMaya
Excursionist
48 0 4

Hello Dear community members,

 

I’m looking into totally removing the blank space margins, around the product photos, on mobile view. So the photos end right on the site’s edges.

 

Please help me, I love you.

 

misteri.ca

 

IMG_1183.jpeg

Replies 4 (4)

Moeed
Shopify Partner
5844 1588 1886

Hey @MiguelMaya 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
product-info {
    padding-top: 0 !important;
}
.slider.slider--mobile .slider__slide {
    padding: 0 !important;
    margin: 0 !important;
}
.slider.slider--mobile {
    gap: 0 !important;
}
}
</style>

RESULT:

Moeed_0-1729535690805.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


AnneLuo
Shopify Partner
1039 196 220

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
@media screen and (max-width: 749px){
.section-template--16994491039898__main-padding {
    padding-top: 0 !important;
}
.grid--peek.slider .grid__item:first-of-type {
    margin-left: 0 !important;
}
.slider.slider--mobile .slider__slide {
    width: 100% !important;
    padding-top: 0 !important;
}
}
</style>

Result:

AnneLuo_0-1729563190850.png


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

MiguelMaya
Excursionist
48 0 4

Than kind of worked, id still like removing that thin white layer around. Is that possible?

GTLOfficial
Shopify Partner
616 134 122

Hello @MiguelMaya 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-slider.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
slider-component.page-width {
padding: 0px !important;
}
}

result
24.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: [email protected] - Skype: ritesh_27dh