I'm afraid this doesn't work on mobile. Content is cut off at the top and bottom.
This will be the biggest problem:
.main__wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
By positioning the whole page content absolutely you are taking it out of the document flow, so none of its size is considered on the page.
You definitely don't want a height and width on that grid either. Once the above is fixed, you shouldn't need them. Just a max width that's all.
I hope these pointers help
@Drallas
Posted
@grace-snow
I knew it was not completely ok, so I did so more research and decided on:
.main__wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100vh;
align-items: center;
justify-items: center;
}
converted all width / height values to max-values and the component still seems fine to me!?
@Drallas why would you want rows to be 100vh??
You don't need any widths and heights, just let the grid template manage everything
@Drallas
Posted
@grace-snow
grid-template on .grid-container
is setting the values now...
Don't know yet how to get rid of grid-template-rows: 100vh on the .main__wrapper, without it's not vertically aligned..
@Drallas oh you mean on how you're centering on the page? I normally just use display grid place content center, no template rows or columns needed. Maybe that depends on whether it's also min-height 100vh... π€ Or maybe I put that on the body... I can't even remember what I do now it's just automatic π
@Drallas
Posted
@grace-snow directly height: 100vh;
on the .main_wrapper seems to work. Thanks for your tips and time!