Article preview component with HTML, CSS, and JS

Hi Ryiana,

It looks very good!

I would add background-position: center center to you bg image to make it stretch a little more centered on the subject.

Also the breakpoint on media query - i would put id sooner, somewhere around 550px or maybe 600px to give a sooner desktop view and keep the initial card distorsion to a minimum.

Alternativeley, you could set the article_card div to a width of maybe 375px ...

Hope that will help :)

Hi @rngueco! Nice work on this challenge, it looks really nice!

One thing I'm not sure about is the inline event handler. It probably doesn't matter as much in such a small project but in a larger one you'd normally want to separate all your script from html, or am I wrong?

I also noticed that the little triangle isn't perfectly centered which makes the position of your modal a bit off in desktop layout. An easy way to center an element positioned absolutely is to offset it by 50% (so for your triangle: left: 50%). This moves the left edge to the middle of the parent, and all you need to do is move it back by 50% of its own width using the transform property (transform: translateX(-50%)). You could use the same principle to position the modal itself: offset by the amount of padding + half the width of the button, then use transform: translate to move it back by 50% of its width. I think it's neater than trying to find the exact pixel value that would look nice :)

Hope this helps!