I am unsure about the widespread use of em/rem units throughout the project. I mean, when people make large projects, do they use em/rem all the time? It is so easy to get lost with them. Could someone tell me about best practices with that? So I could improve that moment in my future projects. Thank you.
Hi Bohuslava!
There is a perfect explanation on this matter: https://www.youtube.com/watch?v=_-aDOAMmDHI
TL:DR - usually it's rem, sometimes it's em. 😅
Good luck !
I wasn't sure if we were supposed to make it center vertically or not and I couldn't find a way to make it center both vertically and horizontally, if anyone has a suggestion for that it would be appreciated. Thanks.
Hi Yoshi! Congratulations with your first challenge.
Try to replace your body and .main with this:
body {
background-color: hsl(219, 39%, 84%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.main {
border-radius: var(--BORDER-RADIUS);
max-width: 355px;
background-color: hsl(0, 0%, 100%);
}
I suggest you to dive into flex and grid in CSS. These are the most powerful positioning and layout tools in CSS.
I also suggest you visit this link: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element
Hope it can help you, reach me out if you have more questions. Good luck!
How did you solve the hover laying on the image?
Hi there! Try this:
<div class="image-wrapper">
<img src="images/image-equilibrium.jpg" alt="icon">
<div class="overlay">
<img src="/images/icon-view.svg" alt= icon" class="icon">
</div>
</div>
.image-wrapper {
position: relative;
}
.image-wrapper img {
border-radius: 10px;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background-color: hsla(178, 100%, 50%, .5);
opacity: 0;
display: flex;
justify-content: center;
transition: opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.icon {
margin: auto;
}
.image-wrapper:hover .overlay {
opacity: 1;
cursor: pointer;
}