Article component built with Sass, Flexbox, & vanilla JavaScript

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 4 years ago

  Hi Jen, great job! Component is responsive and popup works well. Just really minor tweaks here:

  • I'm not getting misalignment on the card-info on my end, but the SHARE text could be vertically centered
  • .card has a bottom margin. Not sure why but since the article is centered via flexbox, you might not need it. Maybe to match the design? Playing with paddingand the contents inside the divs seem to work better for me.
  • I think the max-width for smaller devices can be reduced so it's not laying wide before the breakpoint. Of course this is just a matter of preference :-)
  • the box-shadow is slightly heavier than the design

  If you haven't already, download the chrome extension PerfectPixel and use it together with the sketch files to get really close to the design. Hope this helps :-)

  2

  ---

  

  Jen•1,230

  @En-JenPosted about 4 years ago

  @emestabillo Thanks so much for the thoughtful feedback!! I just centered the SHARE text vertically. I was going off of the sketch file design but I just noticed that the jpg design has the SHARE text centered vertically but the sketch file doesn't.

  The reason I added a margin-bottom to the .card was so that the attribution wouldn't overlap the .card on really small mobile screens like the iPhone 5. I just took out the margin bottom though because I'd rather have it match the design more closely. Thanks for the tip on using PerfectPixel, just got it and now it's looking much closer to the design 🥳

  I reduced the max-width a little, but I kind of like that the width of the card increases on tablets and doesn't just stay mobile sized.

  Tweaked the box shadow too, but looks like I overcompensated a bit 🤔

  Thanks again!!

  0
• 

  Sebastian Urbaniec•170

  @surbaniecPosted about 4 years ago

  Hello, on desktop view avatar, card__info and share btn are off the card. Also your social links are not centered within div

  1

  ---

  

  Jen•1,230

  @En-JenPosted about 4 years ago

  @surbaniec thanks for the feedback! Hmm I'm not seeing that the avatar, card__info, and share btn are off the card on desktop view. What browser are you using? Good catch with the social links, just fixed that!

  0

  

  Sebastian Urbaniec•170

  @surbaniecPosted about 4 years ago

  @En-Jen now everything works good :) . I use firefox developer edition.

  0