Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Pricing component with toggle (using only HTML/CSS, no JS)

Ian 150

@blndcat

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

Patrick 800

@PPechmann

Posted

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 GitHub
Discord logo

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