Design comparison
Solution retrospective
first challenge on here just thought I'd dip my feet in. I'd love any feedback anyone might have.
Community feedback
- @DavidMorgadePosted over 2 years ago
Hello, welcome to the comunity and congrats on solving your first challenge!
Your component looks pretty good for me, but there a few things that are missing and can maybe help in improving your component.
You are using the property
word-spacing
in some classes, but if you want space between your letters (like the "perfume"), you need to useletter-spacing
, for this property, each unit of distance that you assign to it, it would be the space between each letter.Also would be nice if your add to cart button have a
cursor: pointer
to specify that is a clickable.In terms of responsive try to remove the ´padding-left´ global flex container because it moves your components and brokes it at mobile version. I would also add some space between the texts, for example with some
margin
(for the mobile version, your desktop version seems to have the proper spaces).Hope this helps you in future projects!
Marked as helpful0@JacekhackingPosted over 2 years ago@DavidMorgade
Hey, thanks David! I appreciate you taking the time to look at my component. Thank you for the catch on the word vs letter -spacing. And yep you're right totally forgot the cursor pointer and forgot to remove my padding left. Great catch on the margins on the mobile didn't even notice it. I'm going through now and updating all of that. I appreciate you and your response! :D
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