Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Order Summary Component using CSS Flexbox

Pogen 60

@IPogenI

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found styling the buttons with box shadow a little difficult and also making it look good in mobile version was a little difficult. I tried to maintain code readability and tried to follow all the best practices. I definitely would love to get feedback on this. Anything that needs improvement or a little adjustment or something totally off the track, please don't hesitate to let me know about it. Thank you

Community feedback

zoleee98 250

@zoleee98

Posted

hi! looks like you have trouble with the background.

you can fix it with adding this to the body:

  • background-size: contain;

i noticed that your cancel order button has no hover effect. also if you dont want to copy paste hsl colors, you can store them in a variable. anyways great work!

Marked as helpful

1

Pogen 60

@IPogenI

Posted

@zoleee98 Thank you so much for your feedback! I don't know how I forgot to add the hover effect for the cancel order button, but now I have fixed it and also added the background-size to contain, i previously thought the background image a little higher but I guess that's not the case. Also thanks for the variable suggestion, I know that makes the work pretty easy to change, i just thought this was a small project so i went on and just copy pasted the colors but thanks for pointing that out. Thank you very much for taking your time to view my project and for reading this.

1
zoleee98 250

@zoleee98

Posted

@IPogenI im glad to help you, good job

1

Please log in to post a comment

Log in with GitHub
Discord logo

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