Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card

@SSameer20

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


found difficulty in making it responsive for mobile

Community feedback

@mikestopcontinues

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord