Order Summary component (CSS Grid, Custom CSS, Responsive)

Nice! 🙌🏻

I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.

You can read more about it here, in case you haven’t done much of it:
https://www.w3schools.com/css/css3_transitions.asp

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

Hi, Mohsin!

Here are a few ways you can do to improve this solution.

• The hero illustration and the music icon are decorative images. So, leave the alternative text empty (alt="").
• For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
• Use CSS to make the "Change" text to be bold instead of using <b>. Remember that HTML is not for styling.

I hope this helps. Happy coding!

@media screen and (width <=500px) {
      //anything in here 
  } //-----> not good

@media screen and (500px < width < 770px) {
        //anything in here
   } //-----> not good

Firstly media queries should look like either of the below

@media screen and (max-width:  600px){
    //from 600px style downwards
} 

@media screen and (min-width:  500px){
    //from 500px style upwards
} 

The point is some aspects of your component are already mobile responsive during the design process. In other words focus on mobile design first! Then simply adapt your media query to fix up medium and larger screens So the above can simply be summarized to

@media screen and (min-width: 450px){
    //anything in here
}