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

3 column preview card using CSS Flexbox

@demi05

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


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

@VCarames

Posted

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

@demi05

Posted

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

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