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 3 column card with html & scss

#sass/scss

@thewebmechanic

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is highly appreciated !

Community feedback

Fraser Watt 1,790

@fraserwat

Posted

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

@NaveenGumaste

Posted

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
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