Design comparison
Solution retrospective
I had a little trouble with the <a>
buttons moving on hover as the border
was adding some pixels but aside from that it was fun! Let me know anything to improve the code :D
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there ๐. Good job on completing the challenge !
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>
CSS ๐จ:
-
Instead of using the border-radius property to set individual border-radius values for each component. You can use border-radius to parent component and use the
overflow: hidden
property to clip any content that extends beyond the border-radius of the component..container border-radius: 10px; overflow: hidden; } .card:nth-child(1) { /* border-radius: 10px 10px 0 0; */ } .card:nth-child(3) { /* border-radius: 0 0 10px 10px; */ } @media (min-width: 950px) { .card:nth-child(1) { /* border-radius: 10px 0 0 10px; */ } card:nth-child(3) { /* border-radius: 0 10px 10px 0; */ } }
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful2@adityaphasuPosted almost 2 years ago@MelvinAguilar I was wondering myself too that I shouldn't write separate
border-radius
code but didn't know what to do. Thanks for theborder-radius
CSS solution and the feedback!0 - 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.:
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