Cosmo• 590
@cosmoart
Posted
Hi Payal! Looks great!... Both cases didn't work because the body didn't have enough height to center its elements. If you want to center a card like the one in this challenge, I recommend you use this method:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Regarding the change in size of the cards when hovering on the button, it is because you are using border: which increases the size of the button, forcing the other boxes to do so as well. To fix it you can use outline or use an invisible border:
button{
border: 2px solid transparent;
}
button:hover{
border: 2px solid red;
}
As a last recommendation, I suggest you use a more semantic html: you can use <main>, <section>, <figure> etc.
I hope this is useful for you... Keep it up👍
Marked as helpful
0
Payal Deshmukh• 20
@DeshmukhPayal
Posted
@cosmoart Thank you so much for the feedback. It is really helpful.
0
