Submitted almost 2 years ago
3-column preview card component using CSS flexbox
@HazemHussein14
Design comparison
SolutionDesign
Solution retrospective
I am open to your helpful feedback. Here is something I wonder about the border radius of the containers:
- Is there a way to give a border radius to the main container instead of the other child containers to avoid overriding them in smaller screens?
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hi there ๐. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.
Regarding your question
- Set the border radius to the entire component, and then clip the overflowing corners with
overflow: hidden
.
.main-container { max-width: 75rem; display: flex; border-radius: 0.9rem; overflow: hidden; }
HTML:
- You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.:
<h1 class="sr-only">3-column preview card component</h1>
- Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding
aria-hidden="true"
and leaving its alt attribute empty:
<img src="./images/icon-sedans.svg" alt aria-hidden="true"> <img src="./images/icon-suvs.svg" alt aria-hidden="true" > <img src="./images/icon-luxury.svg" alt aria-hidden="true" >
CSS:
- Setting the font-size to 62.5% can attract compatibility issues with third-party libraries or plugins. You can read more about this with this two lectures:
Credit to grace-snow and vanzasetia for pointing this out.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding! ๐
1 - Set the border radius to the entire component, and then clip the overflowing corners with
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