Solved

How to remove product image side padding/margin in mobile

Avalonz
Excursionist
14 0 3

How can i remove side padding of product images in mobile means make it full width image like i shown by red box.

Website: theavalonz.in

1000039906.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7891 1531 1559

This is an accepted solution.

Hi @Avalonz 

You can try to add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
@media (max-width: 749px) {
    .product .slider.slider--mobile { scroll-padding-left: 0; }
    .product .grid--peek.slider .grid__item { width: 100%; }
    .product .grid--peek.slider .grid__item:first-of-type { margin-left: 0px; }
}
</style>

 

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

theycallmemakka
Shopify Partner
1526 343 367

Hi @Avalonz 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media screen and (max-width: 749px) {
    .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0;
    }
    .page-width:has(.product--thumbnail_slider) {
        width: 100%;
        padding: 0px;
    }
    .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
        margin-left: 0;
        margin-right: 0;
    }
}
</style>

theycallmemakka_0-1717955322202.png

 

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Avalonz
Excursionist
14 0 3

Its not working that way it shifted the below text also and image is not full width means next image should not visible it should cover whole area.

Like the red box in first image. And i don't want want to shift text.

Dan-From-Ryviu
Shopify Partner
7891 1531 1559

This is an accepted solution.

Hi @Avalonz 

You can try to add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
@media (max-width: 749px) {
    .product .slider.slider--mobile { scroll-padding-left: 0; }
    .product .grid--peek.slider .grid__item { width: 100%; }
    .product .grid--peek.slider .grid__item:first-of-type { margin-left: 0px; }
}
</style>

 

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Avalonz
Excursionist
14 0 3

It worked 😍 Thank you so much.🙌

Dan-From-Ryviu
Shopify Partner
7891 1531 1559

Happy I could help 😊!

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.