Skip to content
Submitted about 3 years ago

HTML AND CSS 3 COLUMN CARD SOLUTION

Samuel Smith•70
@samuelsmith442
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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
    @JohnnatanVPosted about 3 years ago

    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

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