How to remove product image side padding/margin in mobile

Solved

How to remove product image side padding/margin in mobile

Avalonz
Tourist
14 0 1

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
10975 2150 2290

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>

 

- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 8 (8)

theycallmemakka
Shopify Partner
1788 435 462

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Avalonz
Tourist
14 0 1

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
10975 2150 2290

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>

 

- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Avalonz
Tourist
14 0 1

It worked 😍 Thank you so much.🙌

Dan-From-Ryviu
Shopify Partner
10975 2150 2290

Happy I could help 😊!

- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Heavenmerch
Visitor
1 0 0

Hello sir,

 

     I have done the same thing on my store. It's working but in my case the number of images in the bottom showing 1 extra. Like there are 2 images inthe slider but it's showing 3. Please help 🙏.

 

This is my store link ->

https://heavenmerch.in/products/kafka-kaiju-no-8-oversized-t-shirt-copy

Screenshot_20240715-142259.jpg

Dan-From-Ryviu
Shopify Partner
10975 2150 2290

Please update the code 

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

- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Lavishlifestyle
Visitor
2 0 0

one issue, i am having the right side is still showing padding in mobile view the left side is perfect 

 

<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>

 

Code used ^