Design comparison
Solution retrospective
I feel like I over did it with the classes. Did I use too many? Should I be combining them more?
Community feedback
- @LuisJimenez19Posted 11 months ago
Hello! Congratulations on completing the challenge.
Regarding your question, I think you haven't used many unnecessary classes, I think that's fine. With practice you get better, there are also tools like PostCSS that optimize your code and eliminate the classes that you are not using and/or add prefixes to make it more compatible with other browsers but that is another topic.
I can see that the responsive is not very good, I would recommend using the "mobile first" methodology to make it easier for you. You can notice when the width of the window or screen is 500px or so, the layout is damaged, what you could do is something like this:
.container { width: 90%; /*As you already added a maximum width then it occupies the spaces well*/ max-width: 38rem; margin: self; display: flex; flex-direction: row; margin: 0; height: 70%; max-height: 30rem; border-radius: 1rem; background-color: white; filter: drop-shadow(1rem 1rem 1rem #e3e3e3 ); }
And since you've already done it this way, one of the ways I can think of is to do this:
@media (max-width: 580px) .container { flex-direction: column; width: 100vw; height: max-content; margin: 0; padding: 0; max-height: none; }
You have done a great job, I hope I have helped you, greetings.
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