3 Column Preview

Community feedback

• 

  Ken•4,915

  @kens-visuals

  Posted over 3 years ago

  Hey @smccourtb 👋🏻

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

  • In your markup, <section class="container">...</section> should be <main class="container">...</main>.
  • For the car icons, add aria-hidden="true”, because they're for decoration. You can read more about aria-hidden here. These will fix the accessibility and HTML issues. Don't forget to generate a new repot once you fix the issues. To illustrate:

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

  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother. And in :hover add cursor: pointer; for the finger cursor.
  • I won't go into 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 with flexbox, because using position: absolute to position such big stuff can be tricky and may have some problems on mobile viewport width, and here's how to do it:

  body {
      display: flex;
      align-items: center;
      font-size: 15px;
      font-family: "Lexend Deca", sans-serif;
      padding: 0px;
      margin: 0px;
      min-height: 100vh;
      justify-content: center;
  }
  
  .container {
      display: flex;
      width: 38.5rem;
      color: hsla(0, 0%, 100%, 0.75);
  }
  

  I hope this was helpful 👨🏻‍💻 other than that, you did a good job, keep it up. Cheers 👾

  00

  Marked as helpful
• 

  Shawnathan McCourt•170

  @smccourtb

  Posted over 3 years ago

  Thank you so much. I've had another user get after me about alt tags and the aria attribute so I will make sure to include them from here on out! Clearly they are very important. Thank you for the tips about the transition and cursor it does make a big difference.

  As for the positioning.. I had read in a few places the using vh wasn't the best choice because it messes with mobile layouts? I tried to avoid it this time and couldn't get justify-content to work so I went for the absolute position route. I will change it back and look into positioning a little deeper. again, thank you so much for the critique, it truly is invaluable for me.

  00