search

oscar-system / oscar-website

Dev repo for the oscar website
https://www.oscar-system.org
8 stars 32 forks source link

Fix Tutorial filter for responsiveness #340

Closed aaruni96 closed 3 months ago

aaruni96 commented 3 months ago

Fixes the tutorial filter to behave better in narrow screens: make the words break, and equalize the heights.

I have replaced the HTML table with a flexbox div, and transferred the styles over (the table would either keep the same heights, or break the text, but not both for whatever reason).

Here's a "side by side" of flexbox (top) v/s table (bottom).

image

Fixes #338 , hopefull.

cc @HereAround

aaruni96 commented 3 months ago

In mobile view, the tutorials page now looks like this, which I think looks fine ?

image

HereAround commented 3 months ago

Great. Thank you @aaruni96 . I like this!