Are hardcoded dimensions a must for CSS animations and animations in general?

Hello!
I was goofing around with animations, and was tunnel-vision-ed with figuring them out, that I only did them for desktop version. And after triumphal results, the disappointment that sank in when I remembered It will not work in mobile version because of my hardcoded dimensions was something.

So, any workaround for this? I'm sure hardcoding them for every possible form your app takes is not the way to go. xD

Project in question if you are wondering how it looks: https://glistening-bombolone-928636.netlify.app/

vattevaii•1/27/23, 8:39 PM

For the height I would animate max-height property while keeping height:100%. Set max-height equal to 0 for hiding the element and largest height the element can go up to when showing(in mobile view, height is larger than in pc)

DovahOP•1/27/23, 8:57 PM

I tweaked something and it works now

DovahOP•1/27/23, 8:58 PM

Not exactly what you said, but it did help me think about it. Thanks!

DovahOP•1/27/23, 8:58 PM

Can you maybe check it out to see how it looks now, if maybe you see any major faults?

DovahOP•1/27/23, 8:58 PM

@vattevaii

vattevaii•1/28/23, 2:39 AM

When any filter is selected the width of content is decreasing, you really should look into that. And I suggest keeping the space for filters even if there is no filter. Since the filter div is only shown when filter is selected, the site glitches when selecting filter