CSS

77 readers

1 users here now

A place within Lemmy where one can discuss CSS, ask for help, et-al. Please remember the human.

founded 1 year ago

MODERATORS

[email protected]

How to make pure CSS slideshow responsive? [codepen included] (lemmy.world)

submitted 4 months ago* (last edited 4 months ago) by [email protected] to c/[email protected]

10 comments fedilink hide all child comments

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/

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 2 points 4 months ago* (last edited 4 months ago) (1 children)

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. 🙏

[–] [email protected] 2 points 4 months ago

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