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 with Media Query

Skippy 110

@skippysworld

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


Using media query for the first time. After tweaking the component for the desktop resolution I was a little bit surprised how it actually look on my resolution, but.. Let's see how it went :)

Community feedback

Rio Cantre 9,690

@RioCantre

Posted

Hello there! Awesome work with this project. Looking at your solution, I would like to suggest the following for you…

  • Include description with the alt in image tags. like this line <img src="images/illustration-hero.svg" alt="" aria-hidden="true" />
  • Switch the background images, desktop image should be used on the main body rule set, while the mobile must be placed on the media query section

Above all, the design is well implemented. Keep it up and Hope this is helpful!

Marked as helpful

0

Skippy 110

@skippysworld

Posted

@RioCantre Thanks for the message!

I’ve written mobile version first, therefore I used min-width for media query and let show desktop background when resolution is higher than 786px.

You would prefer to design desktop first and use media query for mobile version afterwards using max-width and mobile version background?

Talking about alt in cover image - I’ve red that it shall not be use for decorative images / icons. Wouldn’t you consider it as decorative in this case?

0
Rio Cantre 9,690

@RioCantre

Posted

@skippysworld

  • Depends, depending on the design.
  • It's used as description for any type of media in default settings. Once fails to upload, it will show the default set up.
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