Change product photo size on mobile - Dawn Theme

[Dekanten]

Hi

I want to change the resolution on main product image on mobile devices, i think its to big and being too close to the vendor link button. I want a litt space gap here for being better looking. 🙂

How can this me made, any one who could help me? 🙂 Thanks in advance

My Storeurl:

www.dekanten.no

See attached image:

[Priyanka_ · Accepted solution]

Hi @Dekanten 

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 </body> tag

<style>
@media only screen and (max-width: 767px) {
    .media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    height: 90%;
  }
}
</style>

5) save the changes.

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

Thanks!

[Priyanka_ · Accepted solution]

Hi @Dekanten 

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 </body> tag

<style>
@media only screen and (max-width: 767px) {
    .media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    height: 90%;
  }
}
</style>

5) save the changes.

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

Thanks!

[Dekanten]

Hi

Thank you very much and this worked like a charm and everything is damn good at the moment, great too see this image gotten smaller, looking better allready. Thank u once again for the big help, really glad for it. 🙂

[Priyanka_]

You're very welcome! I’m glad I could help you out. 😊

[Dekanten]

Im very glad for this too, great to see so small adjustment could do something big like this. Damn good result. 🙂

[Dekanten]

Hi again, i saw my product images are cutted all over the product collections on mobile devices, how can we fix this?

Im only need to shrink the main product page image, not the collections. Hope we can figure something out. 🙂

See attached image:

[Priyanka_ · Accepted solution]

Hi @Dekanten 
Please remove the existing code and replace it with the following:

{%- if template contains 'product' -%}
<style>
@media only screen and (max-width: 767px) {
    .media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    height: 90%;
  }
}
</style>
{%- endif -%}

This will ensure that product images appear smaller on the product page and do not get cut off on the collection page.

Let me know if this code works for you.

[Dekanten]

Hi again, thank so much for this and everything works flawless now. Huge thank you again for this code. Amazing work. 🙂