Card 3 columns

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Stalin! 👋

  Congratulations on completing this challenge! 👏

  Here are some suggestions for improvements.

  • Replace all the h1 with h2. There should not be more than one h1 on a page. Many h1 mean many titles which can confuse the users, especially the screen reader users.
  • Learn more — How-to: Accessible heading structure - The A11Y Project
  • Write your code with consistent styling. You use single quotes on class='icon' while the rest of the HTML uses double quotes.
  • Remove width: 100% from the body. It is already the default styling.
  • Never limit the height of the body element. Use min-height instead.
  • Remove width: 100% from the main. It is already the default styling.
  • Remove height: 100vh from the main styling at @media screen and (min-width: 64rem). Let the content inside it controls the height.

  For your information, it is possible to make the site responsive with no media queries. I recommend taking a look at my solution. I wrote the technique that I used on the README.

  Responsive 3 Column Card Component (No Media Queries) coding challenge solution

  I hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  Stalin•410

  @StalinAMPosted almost 2 years ago

  @vanzasetia I have already updated it with your suggestions, thank you

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @StalinAM

  Great job! Now, the code has better quality. 👍

  0