Article Preview Component - HTML CSS JS and Responsive Design

Hi @JMBeltranDev,

Congratulations on successfully completing the challenge!

I have a suggestion regarding your code that I believe will be of great interest to you.

1. Instead of using @media (width < 1000px), you should use @media (max-width: 1000px). This is the correct way to write it.

2. For the .cards, use max-width: 20.4375rem; instead of width: 20.4375rem; for small screens to ensure better responsiveness:

   .cards {
       max-width: 20.4375rem;
   }
   

3. Add some margin to the main element, around 20px, so it doesn’t touch the screen when the screen size is very small:

   main {
       margin: 20px;
   }
   

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!