The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 11-05-2018, 06:22 PM
S N's Avatar
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).

 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
css, resize, shrink

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:55 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.