Single Price Grid Component - HTML/CSS

Community feedback

• 

  Rebecca Padgett•2,100

  @bccpadge

  Posted over 1 year ago

  Hello @jclegg31. Congratulations on completing this challenge!!!🎉

  Your solution looks really good and I have few tips you might be interested in to improve your solution.

  • On smaller devices your component is cut off due to height:100vh; and to fix the issue you can do min-height: 100vh; on the body
  • Also you can add spacing using padding and margin

  Updated code below

  body {
      font-size: 16px;
     /* height: 100vh;*/
      max-width: 375px;
      display: grid;
      align-content: center;
      margin: 0 auto;
      background-color: var(--clr-lightgray);
      min-height: 100vh;
      padding: 1rem 0; 
      margin: 0 1rem; 
  }
  
  

  HTML 📃:

  • I see that you wrapping everything in div which isn't good for accessibility. A div doesn't have any semantic meaning.

  More info📚:

  • HTML Semantic Elements

  CSS 🎨:

  • Font size shouldn't be in pixels because pixels are absolute unit and doesn't scale when users want to change their font size in their web browser setting.

  More info📚:

  • Font size shouldn't be in pixels

  Here is my solution to this challenge Single price grid component using Tailwind CSS

  Hope you find this useful and don't hesitate to reach out to me if you have any questions

  12

  Marked as helpful