Mobile first Article preview component using vanilla css & JavaScript

Community feedback

• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  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)! 😁

  11
• 

  Anna Leigh•5,135

  @brasspetals

  Posted over 4 years ago

  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.

  11