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 component using css and html :)

Piotr 250

@Piotrek1994

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 am not sure when I should use pixels and when vw or vh or %. Did I make it correct?

Community feedback

@shashreesamuel

Posted

Good job Piotr

Keep up the good work

It appears that you forgot to include the header image for the card

In terms of your design aspect I have some suggestions

  • The card is missing a subtle box-shadow using box-shadow

  • The path to your music icon is incorrect and supposed to be ./images/icon-music.svg

  • The "Proceed to Payment" button needs some margin from the bottom using margin-bottom

  • The background on the body element is supposed to be a light blue.

In terms of your question regarding, I think you should use percentages since it is relative to the device screen size. Pixels and vw is just going to constraint the specific element.

Let's talk about your accessibility issues

  • Document should have one main landmark, this is caused by your document unable to identify the main content and can be fixed by using the semantic main tag which when enclosed with elements located within the body element will indicate that a main content exists

  • Page should contain a level-one heading, this is caused by not having a h1 tag within your document.

I hope this helps

Cheers

Marked as helpful

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