Frontend Mentor Blog Card Preview

👋 Hey, @Aamnbaba! I have a few suggestions for your project:

Use <picture> for Responsive Images

<picture>
  <source srcset="images/desktop.jpg" media="(min-width: 48rem)">
  <source srcset="images/mobile.jpg" media="(max-width: 47.99rem)">
  <img src="images/desktop.jpg" alt="Product image">
</picture>

The above markup tells the browser to use images/mobile.jpg if the viewport width is less than 48rem. Otherwise, it will use images/desktop.jpg as the default image.

If you want to learn more about the <picture> element, here's the MDN documentation. 📚

Correct Media Query Syntax

The media query syntax you've used contains an error. The @media rule should not be nested directly. Instead, write your media queries as separate blocks. Here's how to correctly structure your media queries:

@media (max-width: 1440px) {
    ...
}

@media (max-width: 375px) {
   ...
}

For more details about media queries, you can check out the MDN documentation on @media.

I hope this helped you :).