Remove margins outside product photos

[MiguelMaya]

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

[Moeed]

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:

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

Best Regards,
Moeed

[AnneLuo]

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:

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

[MiguelMaya]

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

[GTLOfficial]

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

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