Design comparison
Solution retrospective
It was a simple challenge and I totally loved it...Though I didn't face any problem , but if I had made made any mistake feel free to point it out....and I'd be grateful if you can give me some feedbacks to improve 🙏
Community feedback
- @vanzasetiaPosted about 2 years ago
Hi, Taskin Sultana! 👋
Nice work on this challenge! 🙌
For the HTML, I recommend removing the
div
. You can make theimg
element as a block element. This is a common thing that developers will do to make it easier to work with the image elements.img { display: block; max-width: 100%; }
For the styling, there's no need for media queries to make the site fully responsive (my solution is one of the real evidence). You can achieve this by:
- Setting a
max-width
to themain
element to prevent the card from filling the entire page while still allowing it to shrink if needed. Then, remove all thewidth
. - There is no need to set any
min-height
on themain
element. Let the elements inside the card control the height of the card.
@media (max-width: 900px) .main { /* width: 50%; */ /* min-height: 30vh; */ /* display: flex; */ /* flex-direction: column; */ /* padding: 12px; */ /* background-color: hsl(0, 0%, 100%); */ /* border-radius: 10px; */ /* text-align: center; */ Note: there is no need to repeat the styling for the card (e.g. background color, etc). } .main { /* width: 20%; */ /* min-height: 30vh; */ /* display: flex; */ /* flex-direction: column; */ padding: 12px; background-color: hsl(0, 0%, 100%); border-radius: 10px; text-align: center; max-width: 17rem; }
- Lastly, remove all the media queries.
That's it! I hope you find this useful!
0 - Setting a
- @neilk17Posted about 2 years ago
Hey Taskin,
Congrats on now having any accessibility or html issues!
Your solution is comprehensive, one thing you can change is the font weight on the h1 text, this can be done by changing the font-weight attribute in css, and also make sure you added it on google fonts before your input.
Good luck with other challenges!
0
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