Skip to content
Submitted about 5 years ago

CSS pricing component with JS price change toggle

Elena Stagg•220
@elenastagg
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there anything in my CSS that I'm missing or could use to write it more efficiently? Are rems/percentages the best measure for sizing? Without re-writing a load more CSS is there a cool way to make it responsive for ipad etc or is the best way to literally write out different measurements for each screen size? Thanks in advance

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Hey Elena, nice work on this challenge! Just a quick heads up that the toggle on mobile is overlapping the first pricing tier item. To answer your questions:

    • Your CSS looks fine. It's not bloated at all. I'd recommend avoiding using IDs as CSS selectors though. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
    • I like rem and % for a lot of sizings. With grid though, I prefer the fr unit. I'll typically use rem units for things like font-size, margin, padding`.
    • The more you work with Grid the better you'll get at re-flowing elements at different screen sizes. One thing to look into would be grid-template-areas. However, it does involve writing more code to change the layout. I like using minmax() a lot in Grid as well, but it wouldn't work for this project as you either want them stacked or on a row, there's no in-between.

    I hope this helps a bit. Let me know if you have any questions! 👍

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