Design comparison
Community feedback
- @IryDevPosted over 1 year ago
Hi, well done for your solution ! 😁
I have a suggestion to improve your solution :
- Your card seems to not be correctly center on the page
- You can use the properties
display: flex;
,align-items: center;
,justify-content: center;
, in order to correctly center your card - You can remove the property
margin-top: 4rem;
andmargin-top: 10rem;
CSS :
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
I hope you'll find this helpful, BTW your solution is great 😁
Marked as helpful1 - @Ozzy-codesPosted over 1 year ago
Hey Ty,
Good work on another project finished!
I noticed the HTML validation report flags, and found some material on MDN that may help to remedy the issue:
“By default, many semantic elements in HTML have a role; for example, <input type="radio"> has the "radio" role. Non-semantic elements in HTML do not have a role; <div> and <span> without added semantics return null. The role attribute can provide semantics.”
Nice use of rems in your sizing! I’m learning more about the relationship between accessibility and the use of rem/em’s. Appreciate the exposure to custom CSS properties, I haven’t seen that use yet.
I’m really curious in seeing your design process in a readme.
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