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/