Responsive 3column preview card component using flex and grid.
Design comparison
Solution retrospective
Hey, people! this is my third front end mentor challenge. If you have any suggestion please leave a feed back. Thank you.
Community feedback
- @AlexKMarshallPosted almost 3 years ago
This looks good. Just a few things to take care over.
In the HTML you need a
<main>
element so replace your wrapper div with that. You can only have one<h1>
. On a real site you'd have one somewhere as this is only a small component. So make your card headers<h2>
and add a hidden<h1>
page title, that is made screen-reader only to maintain validity of the HTML.The CSS is good too. A few points. Avoid setting explicit widths and heights on containers. It may look ok with fixed content. But on the web content frequently changes, and then your layouts will break. You have a
min-width: 100vw
on the body. This is causing horizontal scrollbars when you have more content than will fit vertically. It's not needed, the body automatically takes up the full width of the screen. Removing it should fix the horizontal overflow.1@mikib0Posted almost 3 years ago@AlexKMarshall I fixed everything your said. Thank you for your feedback.
0
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