3-col

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some feedback for you if you want to improve your code.

  • To fix the images update the images:

  Do:

  <img src="./images/icon-sedans.svg" alt="">
  

  Instead of:

  <img src="/images/icon-sedans.svg" alt="">
  

  • Add the border directly on the button instead of doing it on its :hover state, that adds two pixels which makes it move on your screen.

  HTML 📄:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag. You can read more about this here 📘.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  od•80

  @ogueridPosted almost 2 years ago

  @MelvinAguilar thanks for your solutions they both did the trick.

  0
• 

  Nicolás F•180

  @nicolasfigPosted almost 2 years ago

  Hi Od, to fix the images not loading on the live site simply add a dot before the first backslash on the image src <img src="./images/icon-sedans.svg" alt="" />

  For the height of the page changing on hover it's probably because you're using <a> tags instead of buttons but I'm not totally sure why hovering changes the height of the page

  0

  ---

  

  od•80

  @ogueridPosted almost 2 years ago

  @nicolasfig thanks for your help, the hover problem was down to me having the border on the hover but not on the button itself

  0