3-Column Responsive Layout

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @zitescody 👋🏻

  I have some suggestions to help you fix the accessibility and HTML issues.

  • In your markup, <div class="container">...</div> should be <main class="container">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Now, there are a couple of attributes that are causing some issues in HTML, I'll leave the list below:

  <=`` head=``
  role=`img`
  role=`button`
  

  I'm not sure what the first one is, but here's a **link to learn more about role=""

  • For the car icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here. To illustrate:

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

  • Next, add this line border: 1px solid transparent; to your buttons, so initially the buttons will have some border and only during :hover they will change their color. Once you add it you'll see the difference.
  • I won't go into many details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.
  • Lastly, let's bring the card to the center of the screen, and here's how to do it:

  body {
      background-color: var(--verylightgray);
      font-size: 15px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  I hope this was helpful 👨🏻‍💻 other than that, you did a good job for your second project, nicely done. Cheers 👾

  Marked as helpful

  1

  ---

  

  Cody Lewis Zites•570

  @zitescodyPosted about 3 years ago

  @kens-visuals Thank you so much! I implemented your suggestions and immediately see improvement. Cheers

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @zitescody you're welcome, glad to be helpful 😇

  0