@FluffyKas
Posted
Hiyo,
The ping-pong like animation I believe comes from the fact that you don't have a min-height: 100vh on your body. When I add this to your code, it seems to get rid of the problem. Combine this with display: grid and place-items: center to center your component.
It would also be nice if not only the button was clickable, but the whole question. I had a hard time clicking on that tiny icon. I'd suggest adding cursor: pointer as well.
For margins and paddings, you could use relative units instead of setting them in pixels, unless it's really necessary.
@SravanSTG
Posted
Hi @FluffyKas,
Thank you for the feedback. min-height: 100vh doesn't seem to work (atleast on my device). And display: grid, place-items: center somehow pushes the container a little to the right.
Clicking on the question displays the answers now. Thanks for pointing that out.
@FluffyKas
Posted
@SravanSTG Remove the margins you set for your container (they're not needed anymore since you centered your element already) and it should be fine! ^^ Using the browser's inspector and disabling/enabling properties can help a lot to find a solution to your problems :)
Marked as helpful
@SravanSTG
Posted
@FluffyKas thank you!
