Fluid-responsive desktop view throughout using flexbox/relative sizing
Design comparison
Solution retrospective
I omitted the mobile layout for the moment, but it's built out to be fluid-responsive to all scaling. Feedback welcome, this took me a while! Thanks.
Community feedback
- @LeshyNLPosted over 4 years ago
Hi @njboot! Your solution looks very good and the idea of scaling the full design is a cool one.
Of course, when basing everything on vw units, note that you will need media queries to set both a minimum and maximum font size to ensure accessibility. You already indicated that no mobile styles are currently available, but don't forget to also limit the size on the upper end, as the design does become too large to fit and comfortably read at some point.
Once browser support is fully there, the CSS min(), max() and clamp() functions can be used for this.
2@NJBOOTPosted over 4 years ago@LeshyNL Thanks for the feedback I really appreciate it. I'll definitely check out those CSS functions and try to implement them.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord