Skip to content
Submitted almost 5 years ago

Grid component with CSS Grid

vongphakdy•140
@vongphakdy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Still trying to figure out when and how to properly nest styles with scss

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    Awesome work on this challenge! I'd recommend removing the height: 100vh; from the body on mobile, as it's currently cutting off the content at the bottom.

    What is it about nesting in SCSS that you're having issues with?

    0
    vongphakdy•140
    @vongphakdyPosted almost 5 years ago

    @mattstuddert I was wondering why that cutoff was happening. Forgot to remove the height style from an earlier method I was trying out. My nesting concerns with SCSS is based on lowering specificity and knowing when you would want to nest. Since posting my solution I've read up on SMACSS (http://smacss.com/ suggestions so I'm going to apply those practices to my next challenge.

    0
    Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    @vongphakdy nice, yeah SMACSS is a great methodology. As a general rule of thumb for nesting, I would try to never go more than 4 levels deep. Also, avoid unnecessary nesting wherever possible.

    0

Please log in to post a comment

Log in with GitHub

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