Open Leaflet Popup fullscreen in smartphones

Question

I can not figure out how to configure CSS to make popups open fullscreen in my Leaflet App in case people access it from devices with small screens. Everything I found out so far is how to adjust the size of the popup-wrapper. "width:100%, height:100%" doesn't work for me.

.popupCustom{
    font-family: Verdana;
    font-size: 13px;
    width: 330px;
}
@media (min-width: 768px) and (max-width: 991px) {
    .leaflet-popup-content-wrapper {
        width: 250px;} }
@media (min-width: 992px) and (max-width: 1199px) {
    .leaflet-popup-content-wrapper {
        width: 280px; } }
@media (min-width: 1200px) {
    .leaflet-popup-content-wrapper {
        width: 330px; } 
}

Answer 1

Cannot be done. A Leaflet popup is contained within block elements which have a CSS transform applied to them (i.e. the map panes), so the usual technique of setting CSS position property to fixed won't be able to get the popup away from its containing block.

You'll have to resort to alternative solutions, such as having another HTML block element outside of the map container, updating its contents to mimic the contents of the popup, and conditionally showing said element or the popup depending on the viewport size, e.g.:

<!-- HTML -->
<div id='map'></div>
<div id='fullScreenInfo'></div>

---

/* CSS */
#fullScreenInfo { display: none; }
@media (max-width: 768px) { #fullScreenInfo.visible { position:fixed; left:0; right: 0; top:0; bottom: 0; } }

---

/* JS */
map.on('popupopen', function(ev){
  var el = document.getElementById('fullScreenInfo');
  el.innerHTML = ev.popup.getContent();
  el.classList.add('visible');
});
map.on('popupclose', function(ev){
  var el = document.getElementById('fullScreenInfo');
  el.classList.remove('visible');
});

Plus you should add some UI element for the user to close the "fullscreen popup" when shown (which should likely call map.closePopup()).