Single Price Grid Component using Sass & Grid

Community feedback

• 

  Shahar Levy•85

  @monodonBrand

  Posted over 5 years ago

  Hey. My only suggestions for you for this task is to use pixelperfect extension for your browser so you can really be accurate in sizes and spacing.

  I would not use utility classes in a project of this scope, they add duplication if you are already using variables.

  And finally use some kind of a reset.css file to change browser default styles (such as list styles), and that will add clarity to your code.

  11
• 

  Gerben Dol•3,115

  @GerbenDol

  Posted over 5 years ago

  Cool to see you use utility classes on here - great small scale challenge to practice! 😁

  There are some things I think you may have over-complicated a bit:

  • I feel like centering the component-container could've been easier using grid or flexbox, which will give you a bit more flexibility compared to absolutely positioning it.
  • Set your border radius on the component-container and use overflow: hidden; to stop the inner boxes from overlapping the rounded corner. That will save you writing the specific border radius for each box in your different media-queries.

  I think your media queries look just fine! Adding the grid on bigger screens I think is the perfect solution here, so you did really well! 💪🏻

  01
• 

  Sebastian•65

  @primocodetoday

  Posted over 5 years ago

  Mobile-first approach. Very nicely.

  00