Design comparison
Solution retrospective
I couldn't find a way to center the container in the page without having the flexbox overflowing vertically
Community feedback
- @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 anaria-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:📚
- For improved accessibility 📈 for your content, it is best practice to use
em
formedia-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: 📚
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🎆🎊🪅
Marked as helpful1 - The “car icons” in this component are purely decorative. ⚠️ Their
- @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 helpful1 - @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 smootherMarked as helpful1 - @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 thebody
add more height to itself(min-height). So you can simple just setbody{overflow:hidden}
Hope this comment was helpful ,have fun coding
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord