Responsive Pricing component with toggle (using only HTML/CSS, no JS)
Design comparison
Solution retrospective
A fully responsive implementation using flexbox so it displays as it should at mobile and desktop sizes as well as sizes in-between. Implemented without using javascript.
I actually completed this a while back and never got round to submitting it. I used sass and sass variables but if I were to redo it I would probably use css custom properties.
Community feedback
- @PPechmannPosted about 2 years ago
Hi @blndcat,
very well done on this challenge, I like it 💪🏻
I do have a small improvement, to get it even closer to the original design:
You can center the entire content with flexbox. For this you initially have to give the
body {min-height: 100vh;}
to cover the entire viewport. Then you can center it as follows:Display: flex; align-items: center; justify-content: center;
This is not the only wat to center elements, but I do find it the easiest. I highly recommend checking out this small guide on centering, to have a full range of tools you can use anytime.
Hope this helps!
Happy coding 🙂
Patrick
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