3 card component(Fully responsive and easiest)
Design comparison
Solution retrospective
Any feedback regarding design and arrangement is appreciated!
Community feedback
- @pikapikamartPosted over 3 years ago
Hey, great work on this one. The layout in desktop is good, as well as the mobile layout. Resizing, the
button
on the card seems to have different effects, like the one gets the text wrapped, the others are not.Some suggestions would be:
- When you create a website, always include a
main
element that will wrap the main content of that site. On this, wrap the whole layout in themain
tag. - Avoid using multiple
h1
tag. Only use 1h1
per page. On this, the title or the name of the cars could have usedh2
tags, then theh1
could have been only for screen readers. It would have a sr-only class. You can search about screen reader classes. It is just css stylings that you apply to an element, rendering it for screen readers users only. - The icons for the cars should have the
alt
attribute, but leave it blank likealt=""
. - Also, if you want the cards to have the same sizes, since you are using
display: flex
, on those 3 cards, set theirflex-basis
toflex-basis: 100%
. This way, those 3 cards will have the same sizes. Apply it on the.card1
.card2
and.card3
selectors. - Just a quick to what I said in
main
tag, yoursection
element could have been replaced by themain
.
You did a good job in here, just a simple retouch of html would be really awesome. Good job.
Marked as helpful0@AbhinaygunjalPosted over 3 years ago@pikamart yeah! Pointed out right, i will definitely implement it and recorrect it. And thank you for the
flex-basis
thing, i didn't knew about it, i mean heard it from you and that definitely works! It was very helpful, Thank you very much!0 - When you create a website, always include a
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