On smaller screens (phones) the leaflet popup window has a tendency to overflow the screen. I'd like to write some css rules fenced inside a min-width and max-width media query to make the popup window go full screen for small devices only.
There is a ton of positioning done by the library, and I'm having a hard time over-riding those rules.
@media (min-width: 1px) and (max-width: 500px) {
.leaflet-popup-content-wrapper {
position: relative;
}
.leaflet-popup-content {
position: fixed; //Tried absolute, too
top: 0;
bottom:0;
right:0;
}
}