Design comparison
Solution retrospective
Any feedback would be helpful.
Community feedback
- @DebabrataBanikPosted about 2 months ago
Great work on the design!
You might want to center the card in the viewport. For that you can first remove the
margin-top: clamp(62px, 16.533vw, 152px);
and also remove themargin-inline:auto
from your card component. And add some css to the main tag:main{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
Since the main tag contains the card, this CSS will center the card within the viewport without needing to manage margins manually.
Using
clamp()
for margin-top is useful when adjusting spacing based on viewport size. However, because the goal is to keep the card consistently centered, flexbox is a simpler and more effective solution.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