Design comparison
Solution retrospective
The easiest newbie challenge so far (or maybe I missed something?). Should've started with this one!
Community feedback
- @correlucasPosted over 2 years ago
š„ Hello Charmonder š„
Congratulations for your challenge solution!
Overall your solution design is really accurate, you've done everything well wrapping all the card content inside the sections.
I've some tips for you that you can consider to have a perfect match with the design files:
š„ 1.You component width will have a better fit if you use max-width instead of
width: 70%
. If you applymax-width: 1110px;
the component will work better also in bigger screens like screens over 1920px resolution..product-cards { display: flex; max-width: 1110px; }
š„ 2.Your cards are a little too big and this is due each card size, you limited the card using the paddings or simply setting a p max-width to limited how much this element can grow:
p { max-width: 240px; }
If you apply these changes your solution will be really similar to the design files reference. But anyway you've applied the challenge purpose building this responsive component. Well done!
š„ I hope it helps your Charmonder, happy and coding and....
Gotta Finish 'Em All! (the challenges)š!
Marked as helpful2@charmonderPosted over 2 years ago@correlucas Hi Lucas! Thank you so much for your detailed comment! I just started to learn HTML and CSS so I need a lot of advice. I learn a lot from your suggestions. I also took a peek at your solution for this challenge and it was really, really cool! Hope I can do that too someday. And, yes, I'm on my way on catching 'em all challenges! š¤£
1@correlucasPosted over 2 years ago@charmonder hey Charmonder, you're welcome. Don't worry doe sure you'll be able to so the same stuff I do soon. All I've learn about css I learned here doing challenges and having feedbacks. Let's keep coding and catching challenges to reach the League Frontend ššš
1
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