CSS pricing component with JS price change toggle

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  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! 👍

  0