Solved

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

JonathanDun
Excursionist
32 1 2

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?

Accepted Solution (1)

Artzen_tech
Shopify Partner
536 107 107

This is an 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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Replies 5 (5)

Drew_K
Shopify Partner
23 5 0

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.

Shopify and web developer
Get a free store review or consultation here: https://drew-k.com

Artzen_tech
Shopify Partner
536 107 107

This is an 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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
JonathanDun
Excursionist
32 1 2

Thank you. It worked.

Artzen_tech
Shopify Partner
536 107 107

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!

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
JonathanDun
Excursionist
32 1 2

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?