Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi everyone,
I'm having an urgent issue with my product slider on mobile. I need each image to be full-width, without any margin or padding, and without changing the page width—just the slider itself.
I've tried everything (width: 100vw, max-width, margin: 0, padding: 0, etc.), but nothing is working. It seems like I'm not targeting the right class…
I want the images to look like the second image in my setup. If anyone knows how to fix this, I’d really appreciate your help! It's quite urgent.
Thanks in advance! 🙏
https://bxakxd-yi.myshopify.com/
password: fordevs
Solved! Go to the solution
This is an accepted solution.
It doesn't work, sorry, but it's not a big deal because I found a solution that looks pretty good. For those looking to have equal margins and one image per slide without increasing their page width, this code does the job.
Replace these lines :
@media screen and (max-width: 749px) {
.product__media-list {
margin-left: -2.5rem;
margin-bottom: 3rem;
width: calc(100% + 4rem);
}
.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.slider.product__media-list::-webkit-scrollbar {
height: 0.2rem;
width: 0.2rem;
}
.product__media-list::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
}
.product__media-list::-webkit-scrollbar-track {
background-color: rgba(var(--color-foreground), 0.2);
}
.product__media-list .product__media-item {
width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
}
.product--mobile-columns .product__media-item {
width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing));
}
}
with these ones :
@media screen and (max-width: 749px) {
.product__media-wrapper {
overflow: hidden;
width: 100%;
}
.slider.product__media-list {
display: flex;
scroll-snap-type: x mandatory;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.slider.product__media-list::-webkit-scrollbar {
display: none;
}
.product__media-list .product__media-item {
flex: 0 0 100%;
scroll-snap-align: center;
width: 100%;
height: auto;
}
.product__media-list img {
width: 100%;
height: auto;
object-fit: cover;
}
}
Hello @Luukke1 try this code
.slider-container {
width: 100vw;
overflow: hidden;
margin: 0;
padding: 0;
}
.slider-slide {
width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}
.slider-slide img {
width: 100%;
height: auto;
display: block;
}
.slider-container * {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
Thanks 😊
This is an accepted solution.
It doesn't work, sorry, but it's not a big deal because I found a solution that looks pretty good. For those looking to have equal margins and one image per slide without increasing their page width, this code does the job.
Replace these lines :
@media screen and (max-width: 749px) {
.product__media-list {
margin-left: -2.5rem;
margin-bottom: 3rem;
width: calc(100% + 4rem);
}
.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.slider.product__media-list::-webkit-scrollbar {
height: 0.2rem;
width: 0.2rem;
}
.product__media-list::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
}
.product__media-list::-webkit-scrollbar-track {
background-color: rgba(var(--color-foreground), 0.2);
}
.product__media-list .product__media-item {
width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
}
.product--mobile-columns .product__media-item {
width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing));
}
}
with these ones :
@media screen and (max-width: 749px) {
.product__media-wrapper {
overflow: hidden;
width: 100%;
}
.slider.product__media-list {
display: flex;
scroll-snap-type: x mandatory;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.slider.product__media-list::-webkit-scrollbar {
display: none;
}
.product__media-list .product__media-item {
flex: 0 0 100%;
scroll-snap-align: center;
width: 100%;
height: auto;
}
.product__media-list img {
width: 100%;
height: auto;
object-fit: cover;
}
}
^ In "section-main-product.css"
Unfortunately, I don’t have time to test further, but thanks anyway! I’m sure this will help other visitors.
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