How to fix image display issues on Dawn theme for mobile?

[JonathanDun]

I'm using the Dawn theme, and I have an issue in how the images on my product pages show on mobile (I'm using a Samsung S9).

Here's a product page: https://jonathandunsky.com/en-il/products/the-auschwitz-detective-adam-lapid-mysteries-6-hardcover

When you pick the first image, you can see a slice of the second image on the right. When you pick the second image, you can see a slice of the first image on the left, and a slice of the third image on the right.

How do I make it so only the chosen image is shown?

[Drew_K]

I think it's a JS issue. For testing purposes, try adding one more image to the slider. I see the following code in the global.js file:

this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset);
this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;

 Those calculations *might* produce similar behavior because of the image size, slide number, or maybe due to the CSS code. If it works fine with 4 slides (i.e. even number of slides), then this is the case.  Then you just need to try different image sizes, use even slide numbers, or adjust the calculations in the js code.

If it doesn't help - then, css or js code deeper investigation is needed.

[Artzen_tech · Accepted solution]

Hello @JonathanDun 
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 749px){
.product__media-list .product__media-item.grid__item {
    width: 100%;
}
}
</style>

Let me know if need further assistance
Regards,
Artzen Technologies

[JonathanDun]

Thank you. It worked.

[Artzen_tech]

You're welcome! I'm glad to hear that it worked. If you have any more questions or need further assistance, feel free to ask. I'm here to help!

[JonathanDun]

I'm afraid I found that it isn't perfect.

Look at this page on mobile: https://jonathandunsky.com/en-il/products/adam-lapid-mysteries-books-1-7

When the page loads, the image isn't centered, so a slice of the right edge is cut off. If you click on the image in the image array below, it corrects, but how do I get it to load properly?