CSS

76 readers

2 users here now

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

founded 2 years ago

MODERATORS

Zmodem

How to make pure CSS slideshow responsive? [codepen included] (self.css)

submitted 6 months ago* (last edited 6 months ago) by FarraigePlaisteach to c/css

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

[–] FarraigePlaisteach 1 points 6 months ago* (last edited 6 months ago)

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