You can create a tail for the popout either using an ::after pseoudo-element of a square shape and rotate it, and position it (using absolute) relative to the popup element, and then rotate and translate it, and add a z-index lower than the popup, so that only a triangle is seen and is right in the centre. The other solution is to use a thick top border on a 0x0px ::after element. (I used the first solution, but you can find examples for the second online) You can position the popup using calc directly in the css, and add together % values, custom properties, etc. so that if anything changes, it adapts automatically. I used a custom property for the height of the author part and positioned everything vertically in the middle, and then I used the same height (var(--footer-height)) for the popup on smaller screens, and positioned everything vertically in the middle, and so they are nicely alligned. I hope I was able to help you, or at least give you some suggestions to think over! Good job otherwise and happy coding in the future!
Marked as helpful
