Design comparison
Solution retrospective
feel free to criticize the code :3
Community feedback
- @HunigoleSanPosted 10 months ago
Hello @Ilyes0izmr! 🎉 Congratulations on completing the challenge! 🚀
I'm thrilled to see that you've met the main requirements. However, there's a small detail I'd like to address.
In your code, you're defining your ".container" with a "width: 100px". This means that, thanks to your media query "@media (min-width: 390px)", starting from a screen width of 390px, your ".container" class adapts correctly for PC viewing. So far, everything is excellent.
The issue arises when the screen resolution is less than 390px. In this case, your ".container" class will retain the value of "width: 100px", which makes it look bad on devices with a width less than 390px.
My recommendation is to either remove the "width" property or change it to a percentage, for example, "width: 97%".
Keep up the great work and continue improving! Don't stop pursuing your goals! If this comment has been helpful to you, feel free to rate it! 🌟
0 - @Anass-LamiriPosted 10 months ago
Hi! First of all, you did a great job in your challenge, I only want to add some pointers to polish your solution:
-in the mobile viewport if you inspect you will see that the card is broken because of the width(100px) you applied which makes your design broken in the mobile viewport, a solution I can provide is to remove the media query and specify the width to the container like this:
.container { max-width: 390px; }
I hope you find this feedback helpful, and feel free to reach out.
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