Design comparison
Solution retrospective
This is a simple challenge and I wanted to keep it so. Any improvement is more than welcome!
Community feedback
- @correlucasPosted over 2 years ago
πΎHello again Cristina! Congratulations for your new solution!
Your solution is just perfect, I saw that is super responsive and all elements are fluid when the container starts to contract.
There's a little issue when the media query gets activated, note that you don't need media query here, since your component is already full responsive.
For some reason the
padding
you've added for the media query is forcing the alignment left for the container, you can fix it just deleting the media query below:@media only screen and (max-width: 19em) main { /* padding: 1.5rem; */ }
Instead, to avoid the container touching the screen bounds add this margin:
main { margin: 24px; }
Hope it helps and keep it up, this a really good solution!
Marked as helpful0@cristinakellytPosted over 2 years ago@correlucas Hey Lucas! Thank you for your feedback! It really makes more sense, I'll change this!
0 - @denieldenPosted over 2 years ago
Hey Cristina, congratulations on completing the challenge! You did a very great work π
Some little tips for optimizing your code:
- you can use
article
tag for the card container instead ofdiv
to improve the Accessibility - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of texts - remove
height and width
from body because they are superfluous - use
min-height: 100vh
instead ofheight
tomain
tag
Great! You use relative units of measurement like
rem
Hope this help! Happy coding π
Marked as helpful0@cristinakellytPosted over 2 years ago@denielden Hi Deniel :) Thank you for your feedback and tips! I have really let those things pass but it won't happen again!
1 - you can use
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