Design comparison
Solution retrospective
Any feedback how to make my share box responsive to mobile design? Having hard time to implement it.
Happy Coding!🫡
Community feedback
- @retr0webPosted 10 months ago
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
Marked as helpful0 - @danielmrz-devPosted 11 months ago
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 theprofile box
, but I useddisplay: none
to hide it. Once the mobile version was finished, I usedmedia queries
to create the desktop version and changed theshare box
size and then its position usingtranslate
. 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.
Marked as helpful0 - I used the mobile first approach. Started the project by its mobile version. That
Please log in to post a comment
Log in with GitHubJoin 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