In the teaser and full view, if the number of preview-images more than 1, they are shown as on a piece of a screenshot in attachment: 1 large preview-file and other, smaller, below.
Is it possible to make some changes to the CSS-file, what would those files that are smaller (2, 3, 4 ..) does not appear in 1 line, but 2 in the line? Ie if there are 3 preview-files, 1 large and 2 under it. If 4 or 5, then 1 big, and below - 2 rows small.

CommentFileSizeAuthor
#1 product-images.png67.64 KBjeremycaldwell
product.JPG19.3 KBkeereel

Comments

jeremycaldwell’s picture

Status: Active » Fixed
StatusFileSize
new67.64 KB

Hi there, this bit of CSS will do the trick for you:

.more-product-images {
  width: 150px;
}

You can change the width there to suite your site and size of the images etc. so feel free to play with that. The CSS change should go in your theme's "local.css" file located in your /css directory. If there isn't one go ahead and create one and it will load it for your theme.

I've also attached a screenshot of what it should look like when it is working correctly.

keereel’s picture

Cool, thank you!!!
This is my variant:

.more-product-images {
text-align: left;
width: 170px;
}

Status: Fixed » Closed (fixed)
Issue tags: -CSS, -theme, -images, -preview

Automatically closed -- issue fixed for 2 weeks with no activity.