Hi I am having a problem with an responsive image gallery using jQuery cycle.
My fiddle is here - https://jsfiddle.net/qxyodctm/5/
<html>See jsfiddle</html>
You will see only when you refresh the browser the images resize and constrain their proportions properly - but upon browser scaling they do not and overlap each other and wrong width and height.
Any one help?
Thanks greatly
It's your slider plugin that's causing you so much misery. The jQuery automatically sets inline styles to the Ul.slides position: relative; width: 580px; height: 432px;, which of course, are set to the width of the browser when the page is first loaded, but not updated when the page size changes.
Generally, this isn't too big of a concern, because usually the only people who see this will be those testing for responsiveness (and resizing their browser), but it'll load properly for those who just visit on their tablet or whatever (and incidentally, won't/can't resize their browser).
If you want to fix it, you'll have to create some of your own javascript code which selects ul.slides and changes the width on page resize.
I have updated the gallery to use the new jQuery cycle library -'cycle2' and seems to work great. I will update jsfiddle shortly to reflect.