Skip to content
Submitted almost 3 years ago

Responsive 3 column card with html & scss

Thewebmechanic•40
@thewebmechanic
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any feedback is highly appreciated !

Community feedback

  • Fraser Watt•1,790
    @fraserwatPosted almost 3 years ago

    Hey, this looks great!

    Few suggestions:

    • Check your <body> background colour against the one in the design. Should be one of the colors in the "README.md" file.
    • I'd have your @media query kick in a bit sooner, basically as soon as it doesn't "feel" right to have it in mobile/tablet mode anymore (its as much an art as a science)
    • I'd have max-widths as opposed to min-widths, the rest can be sorted out with padding
    • .CardContainer is redundant if you have a <main> element, that's your container.
    • Don't need to explicitly state margin-top if you're trying to vertically center your component. Try adding min-height: 100vh; display: flex; flex-direction: column to the body, then just using margin: auto to center your <main> component.

    Looks great though, keep up the good work!

    Fraser

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! Good Job Thewebmechanic

    Here are my suggestions👇

    -> Always use h1 first and then h2, h3 and so on

    -> Consider using h2-h6 elements to add identifying headings to all sections.

    Keep up the good work!👍

    0

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