How to make Gallery CSS slider from GitHub responsive

Question

I found this pure CSS slider on GitHub that I want to use but it's not responsive and I need it to be. I've tried changing .gallery .item to width:100% but for some reason the height needs to be set in pixels because % doesn't seem to work and if I don't define a height the slides are not quite visible.

Here's the demo: http://wap9.info/6334

Source GitHub: http://benschwarz.github.io/gallery-css/

As you can see if you reduce your browser's size, the slider height stays the same. Can I make this responsive?

Answer 1

It already is responsive. When I change my browser height and width then the hero/slider changes accordingly and nothing seems to break.

EDIT:: Try to remove the js-autoheight hook class from the hero section.

<section style="min-height: /*some value*/px;" class="js-autoheight gallery items-/*Some value*/">