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

Article preview component solution

@ojitxslml

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is welcome c: 👻

Community feedback

Fraser Watt 1,790

@fraserwat

Posted

This looks really great - very clean, especially at desktop width!

Couple changes:

  • at mobile widths, you'll want to remove the width: 24rem on .card__image, as if you move the screen to 600-750 ish px wide the picture doesn't stretch across the whole div
  • Likewise, on your (max-width: 774px) media query, get rid of the height: on .card__body - you tend not to want to explicitly define the height in divs with content in them, and it's leading to a lot of white space around this width. This will introduce a padding issue, which you can also solve by removing the padding-bottom: 0; line from the same element.

Keep it up!

Marked as helpful

1

@ojitxslml

Posted

@fraserwat Thanks! I will try those changes 🙌

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