This possibly should be considered a feature request, but I'm putting it under bug report.

The slideshow area itself is behaving as it should for responsive design. The controls are displaying at the proper width. However the images are not scaling down at all to fit in the smaller available area. The slideshow is just showing the amount of the original larger image that fits in the available space.

So if I have an image that is 938 pixels wide in the slideshow, and it is displayed on a screen width of 320 pixels, then only the 300 or so pixels of the left side of the image will display in the slideshow area and it will be at the same height as the original image.

I think it would be better if the image size would scale down in proportion to the available width. So if you have an image that is 938 x 439 at full size, when that image displays on a 320 screen width, it should display in full at 300 x 140. If you have images that have text on them, the text will not display properly if you're only showing the left 300 pixels of the image.

Is there a setting I'm missing that would solve this problem?

Thanks for the great theme. Hopefully I can get the slideshow displaying as desired at the smaller screen widths.

Comments

wildlife’s picture

wildlife commented
Title: Slideshow images not scaling down for smaller screen sizes. » I solved it.

I just added the following CSS to the style.css file

#slideshow .slider-item-image img {
  width: 100%;
  height: 100%;
}

The image is now resizing as it should.