Responsive Page made using grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Karthikeya! 👋

  Congratulations on finishing this challenge! 🎉

  I notice that there is a two-column layout between the one-column and three-column layout. Also, there is a pink background color. I recommend removing the two-column layout. There should only be a one-column layout for mobile and a three-column layout for desktop layout.

  For the buttons, I don't see a misalignment. So, there is nothing to be fixed.

  Here are some suggestions for improvements.

  • Swap all the h1 with h2. It is not a best practice to have many h1 on a page. It can confuse screen reader users because many h1 mean many titles. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings.
  • The car icons are decorative images. So, leave the alternative text empty (alt="").
  • Always specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly.
  • But, I don't think those "Learn More" buttons are buttons. I think those buttons should be links (anchor tag). If this is a real website, each of the button should navigate the users to another page.
  • I recommend writing the styling using the mobile-first approach. It leads to shorter code. As a result, it makes the website load faster.
  • Use the em unit for media queries. It adapts when the users change their font size setting. Here are some references.
    • @media - CSS: Cascading Style Sheets | MDN #accessibility_concerns
    • PX, EM or REM Media Queries?

  I hope this helps. Happy coding!

  0