@hitmorecode
Posted
Nice well done. Just a few tips
body {
background-color: hsl(0, 0%, 95%);
font-family: "Lexend Deca", sans-serif;
line-height: 1; /* you don't need to have this on the body, you can remove it */
/* add these lines to place the card in the middle of the page */
min-height: 100vh;
display: grid;
place-items: center;
}
.preview-card-container {
display: grid;
max-width: 92rem;
grid-template-columns: repeat(3, 1fr);
/* margin: 10rem auto; */ /* remove this line, it's no necessary, because grid on the body is doing this */
}
Marked as helpful
@SafeNSound95
Posted
@hitmorecode thanks for the feedback, I removed the line-height line and it's indeed better without it.
but for the min-height: 100vh, I've been trying to do this for the past two challenges but it breaks the components. I've tried both min-height:100vh, and setting height: 100% to container, body, and html. but both solutions break the layout even though they're recommended all across the internet.
basically when I set min-height:100vh and then open up dev tools for example, the layout gets pushed till it reaches the top and is no longer centered. I don't know if it's a problem with the rest of the code, of if the layout getting pushed around with min-height is normal, but that's why I steered away from setting the height so far.
@hitmorecode
Posted
@SafeNSound95 I don't recognize this problem, may you add some margins that are causing this problem. Normally when this kind of problems occur is mostly due to margins.
You can try this to see it for your self
<body>
<main>
<div class="box-container">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</div>
</main>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box-container {
display: flex;
}
.box {
width: 300px;
height: 300px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
Play with min-height.
The reason for min-height is to make a page responsive. While you keep adding content to the page, the page will grow accordingly
Marked as helpful
@SafeNSound95
Posted
@hitmorecode thankful for your help, I applied the changes.
