Design comparison
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-btnto 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
- @szloeuPosted over 1 year ago
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 helpful0@PetrosdevriPosted over 1 year ago@szloeu You are right, I forgot the
z-indexoption! I also think we should change the position of the arrow so that this property will work fine (because when I leave it onstaticit 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
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