Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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

@Petrosdevri

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


This is my solution for the Article Preview Component.

It was overall easy and enjoyable building this project, however I faced some difficulties regarding the toolbar:

  • First of all, I would be open to suggestions regarding how to add a triangle below toolbar (I know it might look easy to you but I was also busy with another crucial project so any support would be helpful to save time).
  • Secondly, let me know if there is any way to add .share-btn to the mobile responsive toolbar to match the exact pattern. It might be easy to exit the toolbar in any case, however it would be even better to match the exact pattern.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

Community feedback

@szloeu

Posted

Hi, first of all, congratulations on your solution. The triangle you mentioned is a square, rotated by 45 degrees and in absolute position to the rectangle of the same colour. This square will be "hidden" in the mobile version. In the mobile version the arrow is placed on the layer above the rectangle, you can set this with the "z-index" value. In my case, the rectangle disappears when the visitor either clicks on the icons or other areas of the page. I would appreciate your feedback on whether my comment was helpful.

Marked as helpful

0

@Petrosdevri

Posted

@szloeu You are right, I forgot the z-index option! I also think we should change the position of the arrow so that this property will work fine (because when I leave it on static it doesn't work). As for the first solution I am going to try it out later but I am sure it will work. Thanks for the feedback, it's appreciated!

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