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 with share menu

P
mantis 240

@morauszkia

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


What are you most proud of, and what would you do differently next time?

I am happy, that I managed to tackle all mandatory elements of the project. I am satisfied with the look and also functionality of the result. It might not be a pixel perfect copy of the design, but that was not my primary aim. I aimed to use responsiveness best practices, and I think I did reasonably well in this aspect.

What challenges did you encounter, and how did you overcome them?

I wanted to use overflow: hidden to only having to use border-radius on the whole card, and the parts adapting automatically with the overflowing parts hidden. But that was not possible, because the share menu had to be able to overflow the card boundaries. So I had to find workarounds, without making the whole unmaintainable. So I decided to use custom properties, that I can change, so that everything that has to be consistent, changes together. Unfortunately, anchor positioning is lacking in browser support... maybe in the not so distant future... Another challenge was have the same share menu "behave" differently on small and large screens. I tackled this using container queries, and different values for absolute positioning.

What specific areas of your project would you like help with?

I would welcome any suggestions to make the code easier to maintain. I am aware of anchor positioning, but does not have enough support, yet. Any suggestion for a possible workaround (preferably css only) would be appreciated.

Community feedback

samir-Deve 350

@samir-Deve

Posted

You designed it better than me, hora to You !

0

P
mantis 240

@morauszkia

Posted

@samir-Deve: Thanks!

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