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

Responsive Article preview component

P

@flavin-jr

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@AymaneOnline

Posted

Good job, your solution is quite close from the actual design. I could pinpoint some small inaccuracies:

  • The value of border-radius for the article banner needs to be changed when switching from mobile devices to desktop, from for example border-radius: 10px 10px 0 0 for mobile devices to border-radius: 10px 0 0 10px for desktop devices.
  • The share button styles does not match the design given
  • I think you could avoid the height changing of the card on mobile when you click on the share button by changing the margin-bottom of the .text-content and adding a margin-top for the .user-context.

Marked as helpful

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