Skip to content
Submitted about 5 years ago

Fluid-responsive desktop view throughout using flexbox/relative sizing

njboot•70
@NJBOOT
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Leshy•580
    @LeshyNL

    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.

Join 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