Question

My slideshow’s working correctly in every aspect except the fact that it’s a total failure when it comes to adjusting to different screen sizes.

It works like it should on my big screen, but on my other one it doesn’t adapt and adds a horizontal scroller.

I added width 100% to it but as I’ve found out the right way to do this is by a javascript code that adjusts everything dynamically. The problem is, I’ve never had any prior experience doing this and don’t know where to begin. My page has jQuery loaded by the way.

This is the sample structure of slideshow:

<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>

I suppose a jQuery script to target ‘.featured-image img’ dynamically and add the width and height to it would be the way to do this. Is there any way better than that or a simpler script? Any help is appreciated.

Answer 1

var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);

If you need it to adjust dynamically then you’ll need to capture the resize event:

$(window).resize(function() {
  var screenWidth = $(document).width();
  $('.featured-image img').width(screenWidth);
});