Help center the container without it breaking!
Project: https://benevolent-seahorse-6c9816.netlify.app/
If I do it the regular way with either display:flex or position:absolute with that weird transform centering way, it breaks, due to container having Grid I guess?
Help centering it without that happening, while it still retaining responsiveness?
3 Replies
Try wrapping your container with a div, for example .wrapper { width: min(90%, 50rem); margin-inline: auto;} you can change to a size that fits to your liking. My apologies if this doesn't help.
display: flex;
align-items: center;
justify-content: center;
try this on the body
background-color: var(--magnolia);
height: 100vh;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
As I said, I did try it but it breaks the website due to, I guess, content of container being aligned by Grid?
Will try it! Thanks for suggesting.
@sacarima Works, nice! Thanks!