3-column preview card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @nicolasfig 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • In order for the footer to remain at the bottom on mobile devices, you must remove its absolute position and also set a minimum height for the main component, so that the component can grow and will place the footer at the end and not at the middle when you put "height: 500px;" defined

  @media screen and (max-width: 900px)
  .attribution {
      /* display: none; */
      position: inherit;
  } }
  
  main {
      display: flex;
      min-height: 100vh;  /* Update this*/
      align-items: center;
      justify-content: center;
      background-color: var(--very-light-gray);
  }
  
  .content {
      display: flex;
      width: 918px;
      min-height: 500px;  /* Update this*/
     margin: 2rem; /* Add this to add some space for the container card and the screen edge on mobile devices.*/
      border-radius: var(--s-8);
  }
  

  • The <h1> element is the main heading on a web page. There should only be one <h1> tag per page. The HTML Section Heading elements (Reference). This case requires that SUVS, SEDANS, and LUXURY be <h2> elements.

  • The Learn More elements should be anchor tags and not buttons because they redirect to another website. Use buttons to perform actions such as displaying a modal, performing calculations. Use anchor tags to redirect users to a part of the page or to an external site.

  • Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img src="./images/icon-sedans.svg" alt aria-hidden="true">
  <img src="./images/icon-suvs.svg" alt aria-hidden="true" >
  <img src="./images/icon-luxury.svg" alt aria-hidden="true" >
  

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  1