@emestabillo
Posted
Hi Jen, great job! Component is responsive and popup works well. Just really minor tweaks here:
- I'm not getting misalignment on the
card-infoon my end, but the SHARE text could be vertically centered .cardhas 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 :-)
@En-Jen
Posted
@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!!
