Article Preview -- Grid and Flexbox

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Fernando B! 👋

  Good effort on this challenge! 👍

  artimys has already given you some great feedback, so I'll just remind you not to forget to add some alt text to your image tags and to use a heading to identify each <article> tag that you use. Also, I think it would be a good idea to wrap your card component in a container, set a border-radius on it, and set overflow to hidden so that the border-radius is visible over any overlapping elements of the component. 😉

  Keep coding (and happy coding, too)! 😁

  1
• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Good attempt Fernando 👍 you got the responsiveness down.

  I can suggest a few things to help out:

  • I recommend a px value for your border-radius on your .grid-container. If you notice some corners not getting the radius, apply an overflow: hidden
  • I suggest not using percent values in your body padding. It could have a weird affect when making the browser wider. Try either px or em but if you want to center it try this method:

  body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-height: 100vh;
  }
  

  • add some padding around your desktop layout div.grid-container__content
  • for the social popup. Try adding that container inside the container that has the avatar photo, name, date and play with absolute position.
  • and also your Solution report has some items to take care of

  Hope it helps and keep it up

  1