Responsive landing using grid

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @VanessaAz, some suggestions to improve you code:

  • The car images/icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • The headings are being use incorrectly. For this challenge, each heading is equally as important. So best option, is to use <h2> Heading, because it will give each card the same level of importance and it's reusable.

  • Your "buttons" were created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Vanessa•160

  @VanessaAzPosted about 2 years ago

  @vcarames all done! Thank you!

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @VanessaAz

  Nice! Now for the more detailed parts:

  • Add min-height: 100vh to the Body Element and delete the body element in the media query.

  • Delete the following code; It is not needed.

  
      .card {
          height: 60vh;
          position: relative;
      }
  
      .btn {
          position: absolute;
          bottom: 10%;
      }
  

  • You will use padding-bottom to the heading and paragraph to create the height of the cards.

  0

  

  Rajeev kumar•280

  @beRajeevKumarPosted about 2 years ago

  @vcarames Its new thing for me to learn. ThankYou VanessaAz for share this idea.

  0