@pikapikamart
Posted
Hey, great work on this one.
Layout looks good in desktop and in mobile state as well.
Though when opening up dev tools, your layout gets squished in the middle, and I suspected, height: 100vh
is declared in your bg
selector.
Instead of that, use min-height: 100vh
which will be a lot better. But still, your layout won't work because you absolute
the card
selector which I think not the right choice in here. You want it to be captured by the parent, so making it static
or relative
is the betters ones.
So in your card
selector. Remove this properties
position: absolute;
transform
left and top
And in your bg
selector. You want to add something like
align-items: center;
display: flex;
justify-content: center;
padding: add a padding to the top and bottom;
This will make your content properly aligned in the center while making element in the flow which is a lot better.
If you need help regarding those suggestion, just drop it here okay and i'll help you with it^
@pikamart Hey I checked out the issue and it looks like this problem doesn't occur in my PC, but thanks for the suggestion. I will check that out. While I was looking through your suggestion, I think it's better to use display: grid; place-items: center;
Your ideas would be valuable :)