Design comparison
Solution retrospective
Everything seems fine but the 'share' button. I don't know how to make it responsive, that is, how to make it float above the share icon in all screen sizes. Any feedback appreciated.
Community feedback
- @RayaneBengaouiPosted over 3 years ago
Hello Marko,
Congrats for completing this challenge ! 🙂
To make your social section responsive you could use
position: absolute
on it. So on mobile view you can replaceposition: relative
by this.Then we want it relative to your
.profileSocial
class, so we need to addposition: relative
to it which is already done. But it's not working yet because your.share
class contains also aposition : relative
so you need to remove this one.Finally, you could modify the width of
.profileSocial
towidth :100%
to cover the bottom part, and addbottom : 0
to place it.From there you can play with the padding and z-index to get the final result.
Also, don't forget to handle
border-radius
on your.img-wrap
class when switching to the mobile version. 😉Overall, well done for the challenge and happy coding ! 😃
1@robot200Posted over 3 years ago@RayaneBengaoui thank you for the reply, but this doesn't seem to work. I get the same result as before
0
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