Responsive Card using CSS Flexbox

Community feedback

• 

  Yoshi•50

  @ysstudio22Posted 6 months ago

  The flexbox looks great, but I especially liked your button element. I can see that being useful in real life so that readers can look for all the blog posts with the same label. You could make the margins slightly bigger or add some line height to card_____text to get your solution closer to the design.

  1
• 

  Justin•120

  @andrew-j-brownPosted 6 months ago

  Hi Felipe!

  For a card like this, I think flexbox was the right call! It suits itself well to simple layouts such as the one in this project, and also allows for easy scaling.

  The only difference I could find was a couple of elements styled differently than the reference images. The learning tag and author tag could use some bolding, and perhaps a bit more vertical spacing between the elements would be nice. Since we are using flexbox, you can use gap, similarly to how you used it in the card profile element to separate the photo and author name.

  .card {
      ...  
      display: flex;
      flex-direction: column;
      gap: 16px;
      ...
  }
  

  This lets you easily space all of the elements equally, without having to add margins to each element!

  Hope this helps, have a great day! :D

  1