Blog preview card

Community feedback

• 

  Marcos Travaglini•6,210

  @BlackpachamamePosted 24 days ago

  Hey your solution is amazing! 🤩

  📌 Some suggestions

  • For your <div>Published 21 Dec 2023</div> you can use the time tag: <p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>. More info
  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • Apply flex-shrink: 0 to your image, why?
  • A good tip for naming CSS classes is to use the BEM methodology
  • To make it look better on mobile screens, you can add a margin: 10px to your body and remove it for larger screens. And in your container you can change width: 384px to max-width: 384px. This will prevent your content from being cut off if the screen has a width smaller than 384px.
  • I don't see much use in using flex-flow here

  Marked as helpful

  1
• 

  P

  Ralph Angelo Gonzaga•130

  @codejerooPosted 24 days ago

  Hi, thank you for the feedback! I used flex-shrink = 0 so that the image won't resize lower than its original size but yes, you're correct it was unnecessary. I used flex flow instead of flex-direction to set it up to column but looks like it was unnesscary too. I will try to implement what you've said. Thank you for the suggestions! Especially about the BEM naming convention and the time tag!

  0