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/

  • FarraigePlaisteachOPEnglish
    2•5 months ago

    Thank you so much for this. You went to a lot of effort.

    Thanks for the explanation too. It works really well at all kinds of resolutions and window sizes. I’ll experiment with the values you mentioned. 🙏

    • AwkwardLookMonkeyPuppetEnglish
      2•5 months ago

      You’re welcome. It only took a couple minutes. I’ve been doing this a long time. :)