Skip to content
Submitted 4 months ago

Article Preview Component

David Mwalimu•260
@broken555wheel
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 am most proud of at least being able to toggle the share menu in both screen sizes

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

In the active-site desktop design, the menu has some sort of tag that 'links' it to the share icon. I was unable to implement that.

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

The aforementioned challenge I experienced.

Code

Please log in to post a comment

Log in

Community feedback

  • Jay Khatri•4,230
    @khatri2002

    Hi @broken555wheel!

    The developed solution looks great!

    Triangular Shape Below Social Icon Share Box

    You need to create a small triangle below the social share menu to make it look like a tooltip.

    You can achieve this effect using CSS borders:

    .share-menu:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--text-color);
    top: 100%; /* Aligns the triangle at the bottom */
    left: 50%; /* Center align */
    transform: translateX(-50%); /* Center align */
}

    This creates a downward-pointing triangle using just CSS borders!*

    For more details, check out this CSS-Tricks article on triangles:
    🔗 CSS Triangle Trick

    Keep up the great work! 🚀

    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