Skip to content
Submitted 9 months ago

3 column preview card component using CSS Flexbox

Tenzin Choeda•210
@tenze21
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 feed back on my code is appreciated.

Community feedback

  • solvman•1,650
    @solvmanPosted 9 months ago

    Hi @tenze21 👋

    Great use of semantic HTML 👍 Very well-organized CSS file. Great job overall! It is a very well-done project! Congratulation! 🎉

    I have a few minor suggestions:

    • ⭐️ Heading size seems to be a bit small. Perhaps try 2.5rem.
    • ⭐️ Paragraph text is a bit off. Consider trying a line height of 1.645.
    • ⭐️ Buttons get misaligned on certain width (633px, 686px, etc). Add align-self: flex-end; to your .link class.
    • ⭐️ On small mobile sizes (around 375px wide), the max-width: 16rem on the .wrapper class causes an accessible amount of left and right padding. Consider replacing it with min-width: 19.4375rem. These changes should make your transition more fluid and prevent shrinking to tiny widths.
    • ⭐️ Even thought use of <h1> per <article> element is within HTML5 specification. It is believed that multiple <h1> elements per document might create some confusion for assistive tech users. I think the <h2> heading is more appropriate. To keep heading hierarchy, you could add visually hidden <h1> to your document, announcing to assistive tech users that they are looking at "Frontend Mentor project submission," for example:
    <body>
    <main class="wrapper">
       <h1 class=".vusually-hidden">Frontend Mentor project submission</h1>
       <article class="sedans modal">
           <h2>Sedans</h2>
      ...
     </main>
 </body>

    Visually hidden class:

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Otherwise, very well done! 🚀 Impressive! 🎉 Keep it up! 👍 I hope you find my comments helpful 🫶

    Marked as helpful
    1
    Tenzin Choeda•210
    @tenze21Posted 9 months ago

    Wow... Thanks a lot @solvman for your compliments and suggestions. They are really helpful I will implement it on my project. Your idea of adding a visually hidden <h1> sounds great it's my first time coming through this 😄. Thanks a lot 😊.

    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