Mobile first Article preview component using vanilla css & JavaScript

Hey, Vivien Bálint! 👋

It's nice to see that you're completing so many challenges! Good job on this one! 👍

In addition to brasspetals' great feedback, a super tiny suggestion I might add is to add a hover state to the social media icons in the little popup. It'd be a nice touch, I think! 😉

Keep coding (and happy coding, too)! 😁

Hi, Vivien! 👋 I agree - for a "small" project, this one had a lot of tricky elements. You're on the right track though!

Here's a few suggestions that might help you clean up the code a bit:

• The oversize issue for tablets can be fixed by simply changing the card max-width to a set value (400px, for example) instead of vw.
• I also suggest removing the height and min-height values on the card as they cause a lot of responsiveness issues. It's better practice to allow content to determine height. However, this will definitely effect the layout - particularly the image on the desktop version - but I think it's worth playing around with to see if you can come up with a cleaner solution. At the very least, it's something to consider in future challenges. 😄
• The parent of any element with position: absolute should have position: relative. Here's a good article on absolute positioning that you might find helpful.