Design comparison
Solution retrospective
Is there a better way of making these components match the design beside using hardcoded widths/heights for the containers?
Community feedback
- @michagodfreyPosted about 2 years ago
Hi ralonus, Solid effort here! Answering your question, the way I did it was with padding inside the card and margins of the cards' child elements. It's a bit of trial and error, but I think it results in something that is easier to style and still ends up being close enough to the design.
My solution is linked below, I hope it's helpful
https://www.frontendmentor.io/solutions/3column-preview-card-component-dq4M7vC5j
P.S. A nice little trick to deal with the h1 accessibility error is this h1 { font-size: 0px } I just learned it and it clears up that error without displaying on your live site.
Marked as helpful0@sinjin25Posted about 2 years ago@michagodfrey
I'm seeing now that the space between the svg + title and the title + body text is about uniform. I must've not been thinking well to have missed that.
Thank you for the accessibility tip. I'm getting more of those than most submissions so I'll have to do some research on them.
Thank you for the feedback and good luck on your stuff :)
1@michagodfreyPosted about 2 years agoThank you @sinjin25 good luck on your work too. From practicing on this site I've realized always have a h1 (but you can make it invisible to users), and have everything in a <main> or <header>, <footer> etc. Do that on this project and you'll have 0 accessibility issues.
1
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