3 Column Preview Card Challenge

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @joaovictor333 👋🏻

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

  • 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.
  • For the car icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here. For example:

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

  • Now let's fix the position of the card with flexbox, and this is how to do it:

  body {
      background-color: hsl(0, 0%, 95%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  However, you need to remove all margins from .container and .attribution in order for this to work.

  • Lastly, instead of giving separate border-radiuses to each box, add these two lines to .container:

  overflow: hidden;
  border-radius: 10px;
  

  I hope this was helpful 👨🏻‍💻 overall, you did a good job, nicely done. Cheers 👾

  Marked as helpful

  0

  ---

  

  João Victor•100

  @joaovictor333Posted about 3 years ago

  @kens-visuals Thank you for the tips

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @joaovictor333 no problem 😇

  0