Article preview component

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted about 4 years ago

  Hello, Joy Shaheb! 👋

  Good job finishing this challenge. Your website responds well! What i can suggest is:

  • Remove margins from .container and add max-width: 780px. On your .main-image element add flex: 1 property, max-width: 285px and remove width. On image itself add object-position: 0px 0px;. Then on your .text add also flex: 1 and remove width. Change padding to 2rem.

  This way the whole thing will look nicer, the picture will be smaller and we will add some padding on the content. On mobile resolutions you will have to change max-width to 100% on your .main-image to fill full container.

  • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility. For example your whole .container could be <article> element and text-1 could be h1-h6 element or text-2 could be p element.

  Good luck with that, have fun coding! 💪

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, good work on this challenge, Joy Shaheb! 👍

  In addition to tediko's great feedback, I suggest,

  • Adding a little bit of padding around the social media icons in the little popup box to give the icons some more room in there.
  • Making the box-shadow around the card component just a little more subtle (as in the original design) would be a nice touch, I think! 😉

  Keep coding (and happy coding, too)! 😁

  0