Responsive Blog Preview Card (Flex, custom properties, media queries)

Community feedback

• 

  Marcos Travaglini•6,230

  @Blackpachamame

  Posted 5 months ago

  Hey your solution is amazing! 🤩

  📌 Some suggestions

  • 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
  • The Learning tag could be a span instead of a div
  • The Published 21 Dec 2023 text should be a p instead of a div. The time thing is fine

  10

  Marked as helpful
• 

  Yacoub AlDweik•3,540

  @YacoubDweik

  Posted 5 months ago

  Good job with using semantic elements!

  To change font-size without media queries you can use something like this, but sometimes you need to play with values:

  font-size: clamp(20px ,5vw + 1rem, 30px)
  

  12

  Marked as helpful
• 

  Langit Amaravati•250

  @eLAmaravati

  Posted 5 months ago

  You can use CSS clamp(), min(), or max() functions. Example:

  font-size: clamp(1rem, 2vw, 2rem);
  

  This scales the font between 1rem and 2rem based on viewport width, without media queries.

  00

  Marked as helpful