Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
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>
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
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.
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.
It worked 😍 Thank you so much.🙌
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.
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
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.
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 ^
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025