View Single Post
  #1  
Old 11-05-2018, 06:22 PM
S N's Avatar
S N S N is offline
 
Join Date: Jun 2018
Posts: 1
Thumbs up Shrinking image sizes automatically via CSS

Just want to post my solution to the following issue, in case others need it.

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;
}
}
This reduces the maximum height of images to 550 pixels, but only applies this to larger browsers (where the issue seems to be present).