Single Price Grid Component using Sass & Grid

Community feedback

• 

  Shahar Levy•85

  @monodonBrandPosted over 4 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.

  1

  ---

  

  Elena Stagg•220

  @elenastaggPosted over 4 years ago

  @monodonBrand Hello, thank you very much for the feedback. I hadn't heard of pixelperfect and reset.css before - both look very useful, I'll have a go at updating the project using those.

  With the utility classes I was mainly doing this to practice for a larger project but I can see how it complicates the CSS on a smaller project, I probably won't do this for the next challenge.

  Thanks again :-)

  0
• 

  Gerben Dol•3,115

  @GerbenDolPosted over 4 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! 💪🏻

  0

  ---

  

  Elena Stagg•220

  @elenastaggPosted over 4 years ago

  @GerbenDol thanks for the feedback Gerben! yes I’ve just learnt that I can use flex box for centering - so much easier! I didn’t know about the overflow hidden - so useful thank you 😊

  1
• 

  Sebastian•65

  @primocodetodayPosted over 4 years ago

  Mobile-first approach. Very nicely.

  0