Debabrata Banik• 590
@DebabrataBanik
Posted
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 the margin-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
