Hey friends,
Aspiring web dev here. I built this little dashboard using a mobile-first methodology, but I’m having a challenge building out the desktop view. I believe the core problem is that I’m misusing flexbox in a couple of places. Instead of using flex-basis, I’ve got a defined height & width on my parent flex item. It looks great on a phone, but it’s not currently responsive.
The plan here was to put a flex property on the parent element and to use flex-direction column for the mobile layout. Then, switch to flex-direction row for the desktop layout using a media query. However, because I’m misusing flexbox, I’m having a hard time. Can anyone give me any tips?
Live site & git repo are attached. There are preview images of what I’m trying to achieve in the README.md.
Are there a standard set of rules to apply to the root element or root container that are the core basis for this kind of layout? I’ve tried all kinds of variations height: 100vh, width: 100%, and I keep getting it wrong. Any and all help are sincerely appreciated.
submitted by /u/Crowded_Astronaut
[link] [comments]