Design comparison
Solution retrospective
- Did I need to use media queries to make this responsive?
- What can I do to improve the site accessibility?
- I'm unsure if my HTML is semantic, what can I do to make it semantic? Any other observations and corrections are welcome.
Community feedback
- @correlucasPosted about 2 years ago
๐พHello @nzewi, congratulations on your first solution!๐ Welcome to the Frontend Mentor Coding Community!
Nice code and nice solution! You did a good job here putting everything together. Iโve some suggestions for you:
Your don't need to use media queries for this challenge, this component is so tiny that making it responsive is enough to make it fit in big and small screens. You've already used
max-width
so there's only one more thing to improve the card responsiveness, the image is getting stretched because you've set a fixed height, remove it and placemax-width: 100%
anddisplay: block
to have your image resizing with the container:img { display: block; max-width: 100%; } .card__img { border-radius: 1rem; /* height: 35rem; */ }
โ๏ธ I hope this helps you and happy coding!
Marked as helpful0@correlucasPosted about 2 years ago@nzewi Bro Now you can write your own feedback and show your ideas to help other person =)
0@nzewiPosted about 2 years ago@correlucas I'm sorry about that. I didn't mean to offend you. I just thought you articulated what was in my head very well and I added it as part of my feedback. I won't do it again.
0@correlucasPosted about 2 years ago@nzewi Thats fine Nelson I am fine. I think if you wrote your own review will be better and you'll help more person showing your point of view. I mean, you've done one challenge so you can write many reviews about the difficults you had and help other person. You already know the concepts so you can write it with your own words.
Marked as helpful0
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