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

Adaptive Preview Component

Alex Nix 170

@AlexNixx

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


Appreciate any feedback about this solution!

Community feedback

Ollie 580

@ohermans1

Posted

Hi Mate

This might not be the best solution to your tooltip problem, but I will have a go.

I would move the share-tooltip div in your html so that it sits at the same level as card__photo and card__text. Then for the media query just flick it to position: relative; and width:100%; Then you can display: none; your card__footer-share.

You will need to adjust the absolute positioning for the non-mobile version, but this should give you a good start!

Awesome effort by the way!

Ollie

1

Alex Nix 170

@AlexNixx

Posted

@ohermans1 Hi! Yeah, i think best solution start from mobile and after just position layout to desktop. Thanks! U help me a lot!

1

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