How can I adjust the zoomed-in image size on my Dawn theme?

Technical Q&A
1

Hello, I need help scaling an image.
Although the graphics are the appropriate size when a customer views the product, they are incredibly large when zoomed in or when viewing further details. Larger than the size of the screen.
How might I alter that?
Please assist me in modifying the code to prevent this.

I am using dawn theme.

Thank you

2

Hello,

Can you share your website link?

3

https://yourfurn.com/

https://tchf.myshopify.com/admin/themes

4

Adding the below code to your ‘base.css’ file should make the modal images to have a maximum width that is the viewport.

.product-media-modal__content.gradient img {
  max-width: 100%;
  padding: 0 !important;
}

GabrielS_0-1664553054772.png
GabrielS_0-1664553054772.png589×1201 70.3 KB

Let me know if this fixed your issue.

5

Hi KMichael,

i think it’s because your image width in zoom is set to 100%.

You should add a limitation using max-width.

In your CSS you could add this :

.product-media-modal__content>* {
max-width:450px
}

(Change the 450 value at your convenience)

You also have a padding top on the global-media-settings class you should change.
right now you have this :

.global-media-settings {
padding-top: 50%!important;
}

Try to replace it by

.global-media-settings {
padding-top: 0!important;
}

Hope that help :slightly_smiling_face:

6

i added the first code and it helped greatly. The second edit actually messed things up so I changed it back to 50%.

Thank you so much for your help!

7

i see now that the is a lot of empty background on top and below my images. is there a way to remove that or is it part of the image?

8

The below code should handle the white spacing removal:

.product-media-modal__content>* {
  padding-top: 0px !important;
  margin-top: 40px;
}
9

When the function is called using the .onclick() method on the image tab, the size of the image will change as per the given dimensions. Example …One of the 192.168.l.254 simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels If you really want it to change the size of the element and the flow, then you can just change the width/height inside the .half class.