search

coopsoc / website

https://coopsoc.com.au
7 stars 5 forks source link

Add homepage mobile support #63

Closed scorpiontornado closed 10 months ago

scorpiontornado commented 10 months ago

Resolves #22

Remove (presumably) deprecated CardDeck component and replace with Col to enable a responsive grid layout.

Font size might be slightly too big for smaller breakpoints - I used the CardText component as per the docs, which appears to just be a p tag - which is 16pt by default. The cards' texts used to have the description class, but that made the font too small. As a result, it looks a bit goofy at the medium breakpoint (i.e. viewport width ≥768px, <992px). Looks even weirder having a single column at that breakpoint though, so it's good enough for now.

In future, perhaps someone could set up responsive font sizes - i.e., CardText (or perhaps p more generally) should shrink as viewport gets smaller.

Before image image image image

After image image image image image (^ viewport width 900px)

scorpiontornado commented 10 months ago

(I could add more vertical padding to the mobile cards if needed - see image - but I figured screen real-estate was more important): image