Submitted over 1 year ago

Responsive Order summary component using CSS Grid/Flex

Liam Tanfield• 260

@TanDevv

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Selvedin• 150

@SelvedinFrontEnd

Posted 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 helpful

Liam Tanfield• 260

@TanDevv

Posted 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 :)

Please log in to post a comment

Join 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