Single Price Grid Component w/HTML&CSS, Flexbox, BEM

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hi

  This looks a bit broken on my phone. Here are some suggestions of improvements

  • never use width: 100vw;. Viewport units don’t account for scrollbars or device notches so you’re actually introducing horizontal scroll with that. Body and block elements are 100% wide anyway, so no need
  • remove the height 100vh too. Min-height instead allows it to grow if needed (you shouldn’t need it on body html and container though - only add css properties where you actually need them, see what you can remove)
  • put the price in a paragraph tag
  • use a list element for the list in the last box
  • the sign up should be an anchor tag as it would trigger navigation (unless you’re expecting it to do something else?)
  • this is an ideal css grid practice challenge so a bit of a shame to be using flexbox. Consider having another go with grid instead
  • remove height and width from the card. You don’t need either, just a max-width as base and in the media query. Let things be the height they need to be
  • overall I’m not sure you’re understanding heights fully in this, I can see % heights where none are needed…. css grid will help with that part of this layout as you can define all sizes in the grid template, not on the child elements.

  I hope this helps

  Marked as helpful

  2