Article preview component with HTML , CSS , JS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 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)! 😁

  2

  ---

  

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  Hi @ApplePieGiraffe 😀

  Once again your valuable feedback helped me improve , I did not know about object-fit previously

  Thanks to your tips now my site looks even more beautiful

  Happy coding & keep showering you valuable feedbacks 💯

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @abhik-b

  Just took another look, and the image looks much better now! Keep it up! 👍

  1

  

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  @ApplePieGiraffe Thank you

  0
• 

  Aleksandr Aksenov•750

  @axevldkPosted almost 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 ~ ✨

  2

  ---

  

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  Hi @axevldk Thank you very much for your humble opinion , I have deleted those empty srcset attributes and I would try my best to make this responsive on Iphone 5 as well.

  Happy Coding 😇

  0
• 

  Guy Ezra•615

  @ezraguyPosted almost 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!

  1

  ---

  

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  Hi @ezraguy
  Thank you for your kind feedback

  • I tried to make that card as responsive as possible by me
  • I also tried your suggestion and now it looks a lot better

  Thanks for your tips I really forgot about min-width🙏

  1