Four card feature section: HTML, SCSS

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  Nice work on this challenge! Overall your code looks good. The main thing I'd recommend is just reducing your selector specificity in a few instances. For example, .container .midCol .teamBuilder could simply be .teamBuilder. Keeping specificity as low as possible helps keep your CSS code maintainable, especially as your project grows.

  Also, I'd recommend trying out a project using just min-width media queries instead of max-width. It often leads to less CSS code and has the benefit of loading in fewer styles for mobile users.

  I hope that helps. Keep up the great work! 👍

  1

  ---

  

  vongphakdy•140

  @vongphakdyPosted almost 5 years ago

  @mattstuddert This is really helpful I appreciate the time you took to review my code and provide feedback. Regarding the media queries -- by following your suggestion, does this imply writing out the CSS in a mobile first fashion and then the desktop/larger screens in media queries after? Essentially the opposite of how I organized my current code.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  @vongphakdy you're welcome. I'm happy to help! Yes, that's exactly it. You'd start with the mobile and general (colour, fonts, etc) styles and then use min-width media queries to build more complex layouts as the screen size gets larger.

  1

  

  vongphakdy•140

  @vongphakdyPosted almost 5 years ago

  @mattstuddert Thanks so much. Sending some coffee your way

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  @vongphakdy ah thank you very much! 🙂☕️

  0