
Design comparison
Solution retrospective
About the difficulty of the project I found it very simple because I've been studying Html and CSS for 8 months. So it was pretty easy. about areas of the code I'm not sure about. I believe that my code is good but I know that I still have to improve a lot!
Community feedback
- @ecemgoPosted almost 2 years ago
Some recommendations regarding your code that could be of interest to you.
- In order to center it correctly, you can add
min-height
to thebody
. - If you want, you can use the recommended color for the background in
body
:
body { /* background-color:hsla(228, 45%, 44%, 0.37); */ /* width: 100%; */ /* height: 100vh; */ min-height: 100vh; background-color: hsl(212, 45%, 89%); }
- You'd better increase
border-radius
for thediv.caixa
- In order to give a blank between
p
and the bottom of the card, you'd better remove theheight
from thediv.caixa
div.caixa { /* height:430px; */ /* border-radius: 10px; */ border-radius: 5%; }
- In order to give a blank after the
h3
andp
, you can addmargin-bottom
to them:
h3{ margin-bottom: 1rem; } p { margin-bottom: 3rem; }
Hope I am helpful. :)
Marked as helpful1P@visualdennissPosted almost 2 years ago@ecemgo Yes, fixed heights or max-heights for text containing elements should definitely be avoided. It can cause various problems with changing data or accessibility issues. The height should be determined by the content of the container.
@GermanoManoel width: auto; is also redundant. All you need is a max-width in this challenge for the box container (e.g. max-width: 300px in rem for <main class="caixa"></main>)
also i'd suggest you to try to avoid using px as much as possible, use responsive units like rem or em instead.
And finally, when you hover over the card, it scales up nicely, but when you move away, it goes back to original size very abruptly. This is because you have transition in the wrong place. So apply transition: 1s; to .caixa instead of .caixa:hover, because otherwise only the hover state will have the smooth transition property.
Hope you find this feedback helpful!
Marked as helpful2@GermanoMan0elPosted almost 2 years ago@ecemgo Thank you very much! It makes a big difference what settings were before. 🙌🏼👏🏻😊
1@GermanoMan0elPosted almost 2 years ago@visualdenniss show. thank you so much for the tips helped A LOT! 🙌🏼👏🏻
0 - In order to center it correctly, you can add
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord