Responsive single page price grid

Community feedback

• 

  Lord Robins•550

  @ZenitsuAgPosted almost 2 years ago

  Hi Kritika, you've done a great job and your code is responsive. Some tips to help you improve your code.

  • It's better to wrap the entire code in a main tag for accessibility purposes
  • Also, the entire code cover the entire screen so we can't really see the body tag. We can change this by setting a width value maybe to 80% or something else, depends on you.
  • Heading tags should also increase in a logical order, that is h2 after h1, h3 after h2 like that. This is because of screen readers to make the page easy to navigate. You can read more about it here.
  • Then you can center it using CSS Flexbox with this code body {display: flex; justify-content: center; align-items: center} and that's it.
  • For the button shadow, you can solve that by using the box-shadow property. So something like box-shadow: 0px 6px rgba(0, 0, 0, 0.2) should do it, but feel free to edit it as you want. -Also in the "Why us" section, you should use a separate p tags for each item.
  • In your CSS where you called body, h1, h2 etc to remove the margins is okay but preferably you can use the universal selector to do it. Like this

  * {
  margin: 0;
  }
  

  Overall you did really well.

  Happy Coding :)

  Marked as helpful

  1

  ---

  

  Kritika•20

  @11Kritika11Posted almost 2 years ago

  @ZenitsuAg Thank You so much for giving time and efforts to look at the code and pointing out where i can improve the code and it's accessibility. I'll definitely update this code as well as mind this points in future challenges :)

  1