Design comparison
Solution retrospective
Suggestions are welcomed!
Community feedback
- @Abdelghafour122Posted about 1 year ago
Hello shettyankith, you did a great job on this challenge especially on the card styles. However, I have some suggestions for you that might further improve the solution:
** I've noticed that the card element isn't centered, and the overlay is relative to the
container
not theimage
** You can solve that by adding these styles: 1.Addheight: 100%;
to bothbody
andhtml
elements, for the page to take the full height of the screen.2.Add these styles to the
body
element to center the card in all screens:display: flex; align-items: center; justify-content: center;
3.Make the Overlay absolute in it's parent element (image) by setting it's parent element's
display
property torelative
, it should be the direct parent.4.You don't have to set the overlay's height and width by
px
yourself, you can just sayheight: 100%
orwidth: 100%
and it will be set automatically for you.Other than that, every thing looks great! I hope you find my suggestions helpful ! Have a good time coding ! ;)
Marked as helpful0@ShettyankithPosted about 1 year agoThank you @Abdelghafour122 for your feedback and suggestions! I really appreciate your kind words and the time you took to provide these valuable insights. Your suggestions are indeed helpful, and I'll definitely implement them to improve the solution.
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