Blog preview card

Community feedback

• 

  Mike Stop Continues•100

  @mikestopcontinuesPosted 11 months ago

  Hey, nice work! Here's a few tips for next time:

  1. Designers and Product Managers are very picky about their designs. Before you present your work for feedback, you should aim for pixel-perfect design. They would want to see you fix the padding around the edge, the "Learning" pill's shape, and the "active" state when you hover over the article title. See the design images for details.

  2. The mobile design shows the card retaining all of it's padding and text size, but it doesn't show what happens when the device is smaller than the image. Given what you see in the design spec, it seems like the intention is that the card should shrink to fit the device width, meaning that the image should get smaller and the text should wrap. Your problem comes from using too many width and min-width properties with pixel values. Solve this by relying on max-width: *px and width: *%.

  3. Next time around, clean up your CSS before submission. Many of your rules are @media duplicates or are unnecessary. In a toy project, this doesn't matter so much, but in real work, these extra rules make it really hard to maintain code.

  You've come a long way already. Keep going!

  0