Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Single price grid component using Grid, rem units, media queries

Kevin H.•150
@kevinx9000
A solution to the Single price grid component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


My feedback and difficulties mostly came from responsive design adjustments with Grid and rem units. Here's where I need feedback:

  • Use of CSS Grid; I did a mobile-first workflow, and didn't implement Grid until the larger breakpoints; seems like there may have been a better way to use this and write less CSS for the breakpoints
  • Use of rem units; mobile-first was fine, but then going to large screens made everything seem too small, so I made a lot of manual size adjustments in the breakpoints; again, feels like there would have been a better way to master rem (and maybe em) units so that the size adjustments happen automatically for breakpoints

Otherwise, I welcome feedback about any other observations. Thank you!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Kevin H.'s solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License