I created a banner image for a webpage and by specifying a width of 100% and a max-width of 1024px I got an image that scales down on small devices but also doesn’t get to big on large displays. Perfect.
I decided that I’d like it to be a slideshow so I’ve been testing this pure CSS implementation https://codepen.io/gradar/pen/BaavLLo
The problem is that on smaller devices, the images are too big. So I tried applying the same CSS I did for my static image but it didn’t work. I assume that this is due to the CSS animation specifying funky margins. Is it possible to get the same behaviour that my banner does on the codepen example?
PS: My page with the working banner image is here in case it makes it clearer https://optimumhealth.ie/yoga-festival/
~~Actually, I think I’ve found what I’m looking for here: https://github.com/cssc/Responsive-Slider/tree/master ~~
I’m not sure what exactly makes it work differently to the first example yet because while the codepen example only has a few lines of CSS, this one has about 1,400.That didn’t work either.