Skip to content
Submitted about 1 month ago

Responsive Article Preview Card with Share Feature using Flexbox

accessibility, pure-css
Michael Okorie•150
@Michael-Okorie
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I’m proud of how clean and responsive the layout turned out. Implementing the share icon interaction with pure CSS and making sure the component looks great on all screen sizes felt like a real win. If I were to do it again, I’d take it a step further by building a React version with state management to practice component-based structure and interactivity.

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

One key challenge was properly positioning and styling the share icon tooltip across different screen sizes. It required careful use of position: absolute, media queries, and some creative problem-solving to keep it responsive and user-friendly. I iterated through several versions and tested frequently to make sure the layout held up on mobile and desktop.

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

I’d love feedback on accessibility improvements, especially regarding ARIA usage and tab navigation. Also open to suggestions on refining the transition effects for the share tooltip and optimizing the CSS structure further for reusability.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Atif Iqbal•3,320
    @atif-dev

    Congrats🎉 Michael Okorie on completing the challenge.

    You can further improve your solution by considering following points:

    • In share options(tooltip),small pointing arrow is missing. If you don't know how to make that arrow you can see this code and customize according to FEM design.
    • Active state color on share icon(your #shareIcon) is missing for mobile and desktop view.
    • For mobile view, make "SHARE" and social icons centered and bigger(see design and your solution).

    Hope the feedback is valuable for you.

    Marked as helpful

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