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

Eyob Tarikuβ€’ 20

@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

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! πŸŽ‰

Eyob Tariku’s questions for the community

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

P
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


Eyob Tarikuβ€’ 20

@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
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!