Article preview component with HTML, CSS, and JS

Community feedback

• 

  Daniel Dudu•380

  @danieldudu

  Posted about 4 years ago

  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 :)

  01

  Marked as helpful
• 

  Agata Liberska•4,075

  @AgataLiberska

  Posted about 4 years ago

  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!

  01

  Marked as helpful
• 

  Hachi•155

  @hachi-ops

  Posted about 4 years ago

  This comment was deleted almost 4 years ago

  01