Single Price Grid Component Using CSS Grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 4 years ago

  Looks good!

  Your headings need tweaking slightly that's the only issue I see at a glance. Should be a h1, then section headings h2, make price a h3. You can still keep sizes as you have them now with css.

  Good job

  0

  ---

  

  luwa•325

  @luwa-starPosted about 4 years ago

  @grace-snow I used h2 and h3 because of the font-size. I wanted it to be just as it is in the design.

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 4 years ago

  @luwa-star change the font size with a class. H1, h2, h3 have semantic meaning (for assistive technology and for search engines) so its important theyre nested in the right order, and that every page has a h1

  0

  

  luwa•325

  @luwa-starPosted about 4 years ago

  @grace-snow Ok then. Thanks

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, luwa! 👋

  Nice job on this challenge! Your solution looks good and responds well! 👍

  I suggest,

  • Setting the cursor property to pointer for the button for a nice hover effect.
  • Adding a subtle box-shadow to the component (as in the original design).

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  luwa•325

  @luwa-starPosted about 4 years ago

  @ApplePieGiraffe I tried but I'm not sure how to go about it🙈. I was thinking maybe I should wrap the price-grid in another container so as to add the box-shadow but wouldn't that make the containers too much?

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @luwa-star

  Actually, I think you can apply the box-shadow directly to the .grid-wrapper and then use margin rather than padding to give the component some space! 😉

  0

  

  luwa•325

  @luwa-starPosted about 4 years ago

  @ApplePieGiraffe

  Genius!!😄 👏

  0