@felix-stuff
Posted
Hi @errbrokko, I just looked at your solution. It's quite far, but some of the CSS spacing needs a closer look and for the mobile version there are some issues with the popup and the overall design of the card.
For your questions on how to combine JS and CSS in this case I would recommend reducing the JS to a bare minimum. In my solution I only use one event listener to toggle the share popups visibility. The rest is all done by CSS.
For the bubble look you are only missing on the little arrow at the bottom of your popup. Maybe check out https://cssarrowplease.com to see how you can use the border property in CSS to create this type of arrow.
Another thing worth checking out might be the details of position absolute. In my solution I repositioned the popup to be visible in the center of the screen on mobile and moved the little arrow to the right so that its above the share button.
Marked as helpful
@errbrokko
Posted
Hi @felix-stuff, thank you for the advice. I redid the whole thing but ended up using even more JS but I was albe to fix some bugs along the way. Thank you.
