Price Grid with Flex and Sass

Community feedback

• 

  Zak Croft•50

  @zakcroftPosted over 3 years ago

  Thanks for looking. I checked on a Pixel 4 XL and it looks ok. Which phone did you look on?

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  On mobile the top of the content is off screen for me - I'll pop an image of it in slack for you

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  The only issue I see in the html is that you've jumped a heading level. Headings should go in order. Probably h1 h2 only in this

  In the css it's hard to check it as you've not included an unminified version. From the sass I can see you are nesting heavily which can make things really hard to debug because you're increasing the specificity of the selectors massively.

  The other thing that jumps out is you definitely don't want to do line height in pixels. Use unit less values like 1.2, 1.5 etc. That will then scale with your rem font sizes (very important)

  I'm not sure why there are widths in strange percentage values like 66% in there... Not sure that's necessary.

  I expect the mobile cropping content issue is caused by fixed height in viewport units but can't be sure. Try min- properties instead.

  Good luck with it

  0

  

  Zak Croft•50

  @zakcroftPosted over 3 years ago

  @grace-snow Thanks I will look through these.

  I was wondering about the Sass nesting and yes it did cause specificity issues when I got to the media queries.

  For the widths I don't think I used flex properly, although I addressed this in other places with flex I think I have not done everywhere.

  Thanks again.

  0