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

HTML AND CSS 3 COLUMN CARD SOLUTION

@samuelsmith442

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


This is my second project I need to improve on my css and mobile first approach. I do ok until its time to add media queries and figuring out what to change to make it mobile friendly I would appreciate any help on this issue

Community feedback

Johnnatan 305

@JohnnatanV

Posted

Hey good job whit the challenge, i have some feedback for you.

  • The responsive view dont look complete because you put the max-width of the card in 450px you could use % to make it more adaptable to screen-sizes, one option to fix that is to use a div that wrap the card and give a padding that way you can keep the card inside the size of the screen.

  • One of the accesibility issues is that you have to use the heading tag in decendent order to keep a good practice, if you use a h1 tag the next one should be a h2.

  • For the other issue you need to wrap the footer section inside a footer landmark.

Keep the good job and keep learning.

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