Responsive Order summary component using CSS Grid/Flex
Design comparison
Solution retrospective
This project was very fun to do. I found it fairly straight-forward to do although I do have one question I would appreciate some advice on!
While giving "Cancel Order" the cursor: pointer
command on :hover
and :active
, I noticed that the whole area from left to right of "Cancel Order" was clickable, I only wanted the text to be clickable, yet I was unable to do that. I am unsure if it was a simple solution and it has escaped me while making this project.
Overall feedback and/or suggestions of code changes would be greatly appreciated for me to take into my next projects. :)
Community feedback
- @SelvedinFrontEndPosted over 1 year ago
With my little knowledge I can suggest you to try display: inline-block; and instead of using padding for spacing try margin. And always feel free to experiment. And you can always search on google and even ask here, people are very helpful. Btw you have done great. :) Hope am helpful. Greetings.
Marked as helpful1@TanDevvPosted over 1 year ago@SelvedinFrontEnd Thanks for the comment, Selvedin, I am happy you think I did well!
I think I didn't have to use margin much while doing the project I completely forgot about it, same with
display: inline-block
. I will remember your advice next time :)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