Article -Preview -Component

Hi yagnik0!

In my solution I took a bit tricky approach, but in short share box needs to change its "parent" in terms of position.

So for desktop, one element has position relative (in my case it's a share icon), so when we position the share box, it's relative to that element. For mobile, disable the position of share icon, and give the card itself position relative, so that way on mobile you can place the share box at the bottom of the card.

It may be hard to understand at first, but you can check my solution here, using the dev tools it'll become much clear.

Hope that helps.

P.S.: the share box stays in absolute position in both cases

Hello @yagnik0!

That's indeed quite a challenge.

I'm gonna tell you how I did it:

• I used the mobile first approach. Started the project by its mobile version. That share box goes in the same space occupied by the profile box, but I used display: none to hide it. Once the mobile version was finished, I used media queries to create the desktop version and changed the share box size and then its position using translate. With size and position set, I used javascript to make it appear and disappear when clicked.

My final result was not great, but it worked.

I hope it helps you somehow.

If you wanna take a look, here's the link to my solution.