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

Order Summary Component

@ravi-bhu

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


Is there any other improvement can I do?

Community feedback

@zineb-Bou

Posted

Hi Ravi,

It is a good solution, here are some notes to take into consideration.

  • When changing to small screen devices the 'change' button get overflow of its container, remove the margin for 'change' button and .music-paln container, use rem to set a width to the container and you will see how the element get adopted when changing between screens

  • Avoid using < div/ > for a button, later you have to add Aria attribute some scripts to simulate a behavior of a button.

  • Avoid giving a text a low opacity, it will reduce the contrast and it makes the text looks dull, and disabled, better way to pic the color, pic up the hue then adjacent the saturation.

0

@ravi-bhu

Posted

@zineb-Bou

  1. I have tested on smaller devices as well and I didn't see overflow upto 360px device width. Do I really need to worry about devices with width smaller than this?
  2. Thanks, I didn't think change was a button.
  3. Thanks for this, I shouldn't be misusing opacity. I have changed color instead. Please share your thoughts. Thanks
0

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