Skip to content
Submitted about 2 years ago

3 column preview card using CSS Flexbox

Taiwo Leshi•220
@demi05
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

I was quite confused when at some point, I added padding to one of the columns and it became bigger than the others. Any idea on how this can be avoided?

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Congrats @demi05 on completing this challenge!

    Regarding your question, more details are needed to know exactly what's going on; are you adding the padding the entire column, a certain section and/or element, etc...

    To clean up your code and make semantically correct, you want to do the following to your code:

      <body>
      <article>
        <div>
          <img src="" alt="">
          <h2></h2>
          <p></p>
          <a href=""></a>
        </div>
        <div>
          <img src="" alt="">
          <h2></h2>
          <p></p>
          <a href=""></a>
        </div>
        <div>
          <img src="" alt="">
          <h2></h2>
          <p></p>
          <a href=""></a>
        </div>
      </article>
    </body>

    Since this is just a part of bigger component, its better to use the **<article> element **. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article](More info ).

    Regarding your use of headings, the <h1> heading can ONLY be used once. For this challenge your better of using an <h2> heading or a simple <p>.

    You'll also notice that I reduced the number of containers I used. For a simple project like this one, there's no need bury your code even deeper.

    Happy Coding!

    Marked as helpful
    0
    Taiwo Leshi•220
    @demi05Posted about 2 years ago

    @vcarames this will be really helpful. Thank you very much

    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