Design comparison
Solution retrospective
My big problem was with main picture. I'm unsure of sizing areas. I don't think it's being centered. I was not able. it's too dificult centering unique elements.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Juan, congratulations for your new solution!
I did some fixes to your code and also a tip about how to make the header image responsive: To make it centerd I removed all
width
andheight
from body there you need onflex
andmin-height: 100vh
to make this alignment:body { background-color: var(--pale-blue); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; /* height: 900px; */ /* max-width: 1440px; */ /* min-width: 300px; */ }
And a good practice to have all the image inside the container scaling and respecting the size of the container, you need to add
max-width: 100%
and add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
✌️ I hope this helps you and happy coding!
Marked as helpful1@JuanGarridoTrochePosted about 2 years ago@correlucas Falei Galera! Obrigado pela sua solução. It's just what I needed. I made these corrections in my exercise. Muito agradecido!
0 - @hyrongennikePosted about 2 years ago
HI @JuanGarridoTroche,
Your card is wider than the one in the design and because you used
background-size: cover
the image is zoom in to cover the size of it's wrapping container while still keeping it's aspect ratio. If you for example set the max width of the card to 400px pixel you'll see that the image will look closer to the one in the design.But you did good these are things you'll learn and pickup as you practice.
Marked as helpful1 - @JuanGarridoTrochePosted about 2 years ago
Thanks for your comments. I'll try not to make that mistake again. I'm still learning thanks to your comments. Thank you very much for your answer!
1@hyrongennikePosted about 2 years ago@JuanGarridoTroche don't worry the more you practice the easier it will get just keep doing what you're doing.
1
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