How can I resize large lightbox images in Dawn theme?

[velvet23]

When I click on my products to open in a lightbox, the lightbox images are wayyy too large (fills the entire page). Is there a way to adjust the size of the lightbox pop-up image? Thank you so much!!

[Alok_Kasgar · Accepted solution]

Hi @velvet23 

I hope this solution will works. feel free to text me back if you have any question.
Please follow below 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>
.product-media-modal{
max-width: 900px;
margin: auto;
}
</style>

[velvet23]

This worked! Thank you sooo much, I was going crazy trying to figure it out 😉

float: left;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

[passot]

Thank you!!!!

[passot]

Thank you so much !!!!!!!!!!!!! i was crazy too.

[Twoodlepip]

Thank you!

Do you know how to centre the pop up? Mine is coming up to the left of the screen...

[Magee]

Did you ever get a solution to this? When I use the above code it still always shows up on the left of the screen 😕

[Jamaln]

Is there a way to have different controls for  landscape and portrait images? Works great for landscape not so much for portrait. Something like control over the longest edge?

[Made4uo-Ribe]

Hi @velvet23 ,

Would you mine to share your URL website? Thanks!

[BSS-Commerce]

Hi @velvet23 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Uni-Trend]

If your images are that big, you might just want to make your images smaller, by adjusting the pixel size of the file itself. What is the actual file weight, in kb? A large file is also probably slower to load. Just changing the pixel size in the code, doesn't make the file smaller, it just renders it that way (sorry Jessica Rabbit). 

There are free file resizers (even a Windows power tool) that will bulk resize your images. I prefer FastStone image resizer. It can also rename your images too. Set your image width to the width you want (900px or a standard size) and it will adjust the height to keep your image aspect ratio. 

The selected solution, while not incorrect, is not necessarily the best way to go. 

Of course the biggest issue would be having to reupload the images. Depending on the size of your store, that may or may not be the easiest way to go. 

[Magee]

Its not the image itself that OP is having an image with, if it was, you'd be absolutely correct 🙂 In this case however, its the image lightbox size that is enormous. Even if you upload an original file of e.g. 300 x 400 px clicking on it will open a lightbox version that more or less fills the screen.