If I uploaded "large" product images, the height of the photo would be too tall, which would push the thumbnails too far downward on the screen. I didn't want my users to have to scroll in order to see other other thumbnails.
This only seems to be an issue on desktop browsers. On more narrow viewports, like mobile browsers, the images resize perfectly fine so that the user can see all the critical information.
Other threads mentioned pre-resizing the photos in an image program as a solution, but this seems like a clunky fix for something that could be easily managed using CSS.
My solution was to add the following to the end of my custom CSS:
HTML Code:
@media only screen and (min-width: 580px) { .details-gallery__images-container { max-height: 550px !important; } }
