Solved

How to change gap of the slideshow in Mobile view?

MiuMiu237
Explorer
119 1 24

Hi,

How can I make the gaps (right and left margin) in the 2nd, 3rd ... picture even as in 1st picture in Mobile view?

I'm trying to change this 

 

1 (2).jpg

 

into this 

 

2 (2).jpg

 

Pls check my url: https://189ee3-2.myshopify.com/products/jacket

Thank you! 

 

 

Accepted Solution (1)
Spac-es
Shopify Partner
302 90 114

This is an accepted solution.

To solve it add this code in your theme.css or base.css file:

.slider.slider--mobile {
  scroll-padding-left: 0 !important;
}

View solution in original post

Replies 7 (7)

Spac-es
Shopify Partner
302 90 114

 

To achieve that, you should find the following code in your file named base.css or theme.css (line 3698):

  .product-media-container{
    background-color:red;
    width:90vw!important;
  }

Delete it and paste the following code in its place:

  .product-media-container {
    background-color: red;
    width: 100% !important;
    margin: 0 20px !important;
  }

Result:

 1.PNG 2.PNG

 

MiuMiu237
Explorer
119 1 24

It's still the same on my end. I think it isn't the 'red' section problem but the blue one. Can you access with your phone and check again?

Spac-es
Shopify Partner
302 90 114

It's not possible that it remains the same on your end. The provided code makes the design look exactly like in the image I attached earlier. You must not have placed the code correctly... Instead of adding styles in your .css, try adding the same in your theme.liquid:

<style>
  .product-media-container {
    background-color: red;
    width: 100% !important;
    margin: 0 20px !important;
  }
</style>

What I have noticed is that when sliding the first image to reveal the second one, the sliding stops (if you release your finger) a bit early, making it seem like there is less space on the right side. However, if you force the sliding to its maximum range, you'll see that everything is correct. Even using the little arrows below works fine. At least, that's what I am experiencing.

MiuMiu237
Explorer
119 1 24

I pasted the code exactly. You can check.

Did you see it on the phone or desktop?

In mobile view on Desktop it appears correctly as your captures but in real phone, nothing changed🤔

 

Screenshot (1).png

 

Screenshot (2).png

Spac-es
Shopify Partner
302 90 114

"What I have noticed is that when sliding the first image to reveal the second one, the sliding stops (if you release your finger) a bit early, making it seem like there is less space on the right side. However, if you force the sliding to its maximum range, you'll see that everything is correct. Even using the little arrows below works fine. At least, that's what I am experiencing."

 

3.PNG

Spac-es
Shopify Partner
302 90 114

This is an accepted solution.

To solve it add this code in your theme.css or base.css file:

.slider.slider--mobile {
  scroll-padding-left: 0 !important;
}
MiuMiu237
Explorer
119 1 24

It worked! Thank you😀👍