Article preview component with HTML , CSS , JS

Community feedback

• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey, Abhik Bhattacharya! 👋

  Nice work on yet another challenge! 😆

  A few tips I might suggest are,

  • Adding cursor: pointer to the social media popup button.
  • Adding a max-width to the card component to prevent it from becoming too wide on extra-large screens.
  • Adding object-fit: cover to the image so that it is cropped and does not distort when the page is resized.
  • Adding a little bit more space around the text content of the card component in the mobile layout to give the content some room.

  Keep coding (and happy coding, too)! 😁

  23
• 

  Aleksandr Aksenov•750

  @axevldk

  Posted over 4 years ago

  Hi, Abhik Bhattacharya ~

  I have studied your work here. Great work, especially I like your animation on social icons for mobile. 👍 Here are really tiny opinions for your work.

  Under 375px, responsiveness goes weird. Especially on iPhone5 size. It could be a flaw in your wonderful work. And there are 2 empty srcset attributes on your markup. That's all.

  Happy coding ~ ✨

  21
• 

  Guy Ezra•615

  @ezraguy

  Posted over 4 years ago

  Hey @abhik-b, great job!

  I have 2 suggestions:

  1. like @axevldk said around 300px width the text in the card starts to overflow.

  2. In the 1023px breakpoint I would make the card's width around 55% percent because, in my opinion, 80% percent looks a bit stretched and I would add min-width to the card.

  @media screen and (max-width: 1023px)
  article {
      grid-template-areas:
          "image image"
          "details details";
      grid-template-columns: 1fr;
      grid-template-rows: 200px auto;
      height: 70%;
      width: 55%;
      min-width: 300px;
  

  other than that it's great!

  11