3 column preview card using flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The “car icons” in this component are purely decorative. ⚠️ Their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  [MDN Aria-Hidden] (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden#description)

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

  More Info:📚

  MDN The Anchor element

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

  • Implement a "Mobile First" approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

  More Info: 📚

  Mobile First

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  In these types of challenges, it is not recommended to set overflow: hidden: in the body element, because it may prevent you from scrolling on mobile devices. The scroll appears due to the large margin it uses in the main element: margin: 5rem 0; Reduce it and you could remove the scroll,

  Happy coding!

  Marked as helpful

  1
• 

  Kaustubh Maladkar•230

  @KaustubhMaladkarPosted almost 2 years ago

  Hello, great job on completing the project.

  Considering the fact your question about centering has already been answered and marked as helpful, I will not be addressing that here.

  Although, I would like to highlight a small way to improve the user experience(UX) of your website. When your buttons are hovered over, consider using a transition of ease-in-out to make the color change appear smoother

  Marked as helpful

  1
• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  HELLO......congrats on completing this challenge....well done:🎊 🎊

  Based on your question , it's because you set a min-height on it. So your content must have had margins or paddings that will make the body add more height to itself(min-height). So you can simple just set body{overflow:hidden}

  Hope this comment was helpful ,have fun coding

  Marked as helpful

  1