Anyone know why the div is taking up the full height of the page? I got it to work by putting it in another div. Just wondering why it’s doing that in this case. Thanks
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
place-content: center;
min-height: 100vh;
background: lightgray;
}
.container {
max-width: 325px;
margin: 0 auto;
display: flex;
flex-direction: column;
border-radius: 15px;
background: white;
padding: 15px;
}
.qr-code {
max-width: 100%;
border-radius: 10px;
}
.text {
width: 90%;
align-self: center;
text-align: center;
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 20px;
}
p {
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<img class="qr-code" src="images/image-qr-code.png" alt="qr code">
<div class="text">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</body>
I had a feeling it had to do with flexbox, but wasn’t sure exactly what it was. I fixed it last night and then tried to change it back today, to post it, but I don’t think I recreated it quite how I had it. If I remember correctly, the content was stuck at the top of the page, because I only realized that the div was taking up the entire body height after inspecting it with the DevTools, since it was stuck at the top.
I was trying to get it to center on the page, that’s why I had the 100vh on the body.
After I posted I noticed I didn’t set flex-direction: column; on the body, which I’m pretty sure I had on it last night. I added that, since posting, and then it centered on the page like I was trying to get it to in the first place. I’m still not sure what I did that was making it stay at the top of the page last night.
I’ve gone through those CSS tricks flex and grid guides, but I’ll have to check them out again.
I was trying to get it to center on the page, but thanks for the suggestion. I got it to work after I realized I didn’t add flex-direction: column; I’m still not sure what I did that made it not work last night. It was stuck at the top of the page, like you have in your image, but I was trying to get it to center, and that’s when I looked at the DevTools and noticed the div was taking up the whole body. Anyway, thanks again for the suggestion
Ya, that’s what I did (put it in a wrapper) when I first got it to work. I was just trying to fully understand what was going on, under the hood, so to speak, in the first case. Still not fully sure what was going on, since I wasn’t able to fully re-create what I had in the first place, but I got it to work in both ways. Thanks again
If you open the dev tools in Chrome and twirl open the place-content property you can see one of the properties has an (i) icon. If you hover it, it will tell you:
The flex-wrap: nowrap property prevents align-content from having an effect.
Try setting flex-wrap to something other than nowrap.
Centering using the body is fine for a small practice project but it is unlikely you would want to center everything in the body on an actual site page.
Thanks for all the detail. I never would’ve guessed that flex-wrap would have something to do with it. I’m sure I’ve read about it somewhere, but it’s not something that stands out. There’s so many little details.
Ya, I guess that’s why you don’t see place-content/place-items used often with flexbox. I actually thought they were just for grid until recently. I guess I’ll probably just use them with grid from now on.
And ya, I don’t think I’ve ever tried centering using the body before, but I don’t think I’ve really done anything this small before either. Just thought I’d try it out.
