Remove product images peeking out from sides, want only1 image visible at a time on mobile interface

Shopify Discussion
1

Help me remove product images from side peeking out. i want only one image visible at a time. so the the main image on the screen can cover the whole 100% width. I have already used a code you can see in the css in my screenshot. i have tried different image ratios and several other codes in css but nothing worked. those few codes are: [they might be wrong as i don"t know coding]

@media screen and (max-width: 750px) {
.product.product–thumbnail_slider.product–mobile-show
.grid_item.product_media-wrapper {
left: -1.5rem;
width: calc(100% + 3rem);
max-width: calc(100% + 3rem);
}
}

@media (max-width: 768px) {
ul.product.media-list {
gap: 35px;
}
}

ul.product.media-list {
gap: 15px !important;
}

2

Hey @anjali19

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

um9v0t-gh.myshopify.com

Password: doffew

I created this store yesterday for this particular reason to see if the same problem is persisting here or not so you will only find a product in this store and nothing else.

If you need anything else you can tell me so.

Thankyou

4

Hey @anjali19

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1735018741101.png
Moeed_0-1735018741101.png349×753 78.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hi @anjali19

You can follow this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

@media screen and (max-width: 768px){
media-gallery.product__column-sticky slider-component ul.product__media-list > li {
    width: 100vw;
    margin: 0 !important;
}
}

Here is the result:

LizHoang_1-1735019179299.png
LizHoang_1-1735019179299.png582×768 168 KB

6

I’ll try this in a few on my pc and will update you forsure and will even like this marking ad a solution.

Thankyou so much

7

I’ll try this in a few on my pc and will update you forsure and will even like this marking ad a solution.

Thankyou so much

8

Thank you so much, I can’t wait for your update :grinning_face_with_smiling_eyes:

9

Hey, thanks for this code. it worked just fine but you should check it once more because the navigation is not smooth enough with this code. when i’m using this code, the counting with arrow for products at bottom increases to plus1 means if i’m using 3 images it will show 4 if i’m using 6 images it will show 7 and due to this when i try to slide photo some photos only slides to 90% and rest of get stucked until i slide it and the reason of this miight be those counting mistake because then when i click on that arrow to make last picture slide from it’s halfway stucked position that extra counting increases. [i hope you are getting what i am trying to say or you should check it by yourself, navigating it.]

10

Hey, thanks for this code. it worked just fine but you should check it once more because the navigation is not smooth enough with this code. when i’m using this code, the counting with arrow for products at bottom increases to plus1 means if i’m using 3 images it will show 4 if I’m using 6 images it will show 7 and due to this when i try to slide photo some photos only slides to 90% and rest of get stuck until i slide it and the reason of this might be those counting mistake because then when i click on that arrow to make last picture slide from it’s halfway stuck position that extra counting increases. [i hope you are getting what i am trying to say or you should check it by yourself, navigating it.]

11

@anjali19

Thank you for your inquiry. The matter you are referring to involves JavaScript and requires a more in-depth modification of the theme code, rather than just adding code as I have done for adjusting the width of the image.

Regrettably, I do not have the capability to assist with these deeper modifications. I suggest that you reach out to a qualified developer who can be granted access to the theme code to make the necessary adjustments to the JavaScript files.

I appreciate your understanding, and please feel free to mark our response as a solution if it has been helpful. Thank you!

12

I successfully found a code that did it.

In component-slider.css

42nd line

By making scroll padding left- 1.5rem; (to - 0)

But can you help me now with removing whitespace between images even though i have used a code for both mobile and desktop and did them to zero. A little white line between images is still available there that I don’t want.

The code i used are:

@media screen and (max-width: 768px) {

.grid {

gap: 0;

margin: 0;

padding: 0;

}

}

@media screen and (min-width: 769px) {

.grid {

column-gap: 0px;

row-gap:0px;

}

}