Responsive Blog card using css variables and media queries

Community feedback

• 

  P

  Huy Phan•3,430

  @huyphan2210

  Posted 7 months ago

  Hi, @amancalledkidd

  I would like to answer your question regarding image sizing.

  1. Your img's height doesn't fill its parent element

  You’re setting your img's width to 100%, making it match the width of its parent element (.blog-post-header). That works as expected.

  However, the img's height doesn’t fill the .blog-post-header. This happens because images are inline-replaced elements by default, meaning they behave like text characters. As a result, browsers leave extra space below the image, similar to how they leave space below letters like "g" or "p" in text.

  To fix this, you can set vertical-align: top on the img. This works because vertical-align adjusts how inline-replaced elements align relative to the text baseline. By setting vertical-align: top, you align the image to the top of its container, removing the unwanted space below it.

  2. Use the picture Element with source and img

  This challenge has a quite straightforward solution. However, you might face more complex challenges that require better image handling. In such cases, consider using the picture element to serve different images based on viewport size.

  <picture>
    <source srcset="image-large.jpg" media="(min-width: 768px)">
    <source srcset="image-medium.jpg" media="(min-width: 480px)">
    <img src="image-small.jpg" alt="Responsive example image">
  </picture>
  

  How It Works:

  • The browser checks each <source> element from top to bottom.
  • It uses the first srcset that matches the viewport's media query.
  • If none match, the <img> element serves as a fallback.

  00

  Marked as helpful
• 

  P

  Kumani Kidd•170

  @amancalledkidd

  Posted 7 months ago

  Thank you very much @huyphan2210. This advice is really helpful! I had no idea there was a picture element, will be putting this into practice on the next challenge - Thank you again!

  10