Design comparison
Solution retrospective
I would change the way I positioned my sharing card and the triangle below
What challenges did you encounter, and how did you overcome them?I had difficulty making the response
What specific areas of your project would you like help with?I need help with the responsive part, because as soon as the share button is clicked, depending on the screen size, the share card is poorly positioned
Community feedback
- @bengeraPosted 3 months ago
Hello endriusssantos.
To position the share card so it doesn't move when the screen or browser size changes, you can position the
share-btn
relative to something else. For example, create a container around theshare-btn
, give the container relative positioning and put the share card (and triangle) inside the container. This way, when the screen changes, the share card will stay relative to the container class.HTML
<div class="button-container"> <div id="message" class="message how show"> <p class="text">share</p> <a class="icon" href="#"><i class="fa-brands fa-square-facebook"></i></a> <a href="#" class="icon"><i class="fa-brands fa-x-twitter"></i></a> <a href="#" class="icon"><i class="fa-brands fa-pinterest"></i></a> <div id="triangle" class="triangle show"></div> </div> <button id="button" class="share-btn"><img src="./src/images/icon-share.svg" alt="share icon" class="icon-btn"></button> </div> </div>
CSS
/*Added*/ .button-container { position: relative; } .container .card .content .message.show { opacity: 1; /*Added*/ top: -74px; left: -109px; } .triangle { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid hsl(217, 19%, 35%); position: absolute; opacity: 0; /*Changed*/ top: 53px; right: 114px; }
Hope this helps 👍
Marked as helpful1
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