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 Challenge using Flexbox

@eyobofficial

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


Hi, How did you implement the share tooltip functionality, especially the little downward-facing arrow below the social media icons? I implemented it using the font-awesome arrow icon and absolute positioning but I suspect that's not the ideal solution.

Community feedback

Jen 1,230

@En-Jen

Posted

Hey Eyob, overall it looks like a really clean solution 💪 Feel free to check out my solution for how to code the little downward-facing arrow below the social media icons. I did it in CSS with the ::after pseudoclass. It would look something like this:

.share-tooltip::after {
                content: '';
                width: 0;
                height: 0;
                border-top: 12px solid $color-gray-darkest;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;

Then you would just position it with absolute positioning. Hope that helps!

1

@eyobofficial

Posted

@En-Jen Hi Jen, thank you for your positive comment! And your suggested solution worked like a charm too. I have already updated my submission using your solution.

Thanks a lot again!!!

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