Urgent - Full-Width Product Images in Slider on Mobile Not Working

Solved

Urgent - Full-Width Product Images in Slider on Mobile Not Working

Luukke1
Tourist
5 1 1

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

image (79).png

image (80).png

Accepted Solution (1)
Luukke1
Tourist
5 1 1

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

View solution in original post

Replies 4 (4)

goldi07
Explorer
61 4 6

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 😊

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here
Luukke1
Tourist
5 1 1

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

Luukke1
Tourist
5 1 1

^ In "section-main-product.css"

Luukke1
Tourist
5 1 1

Unfortunately, I don’t have time to test further, but thanks anyway! I’m sure this will help other visitors.