Can Mapbox legends / overlay boxes be displayed differently when viewed on mobile devices?

Question

I created a webmap using Mapbox GL JS for my website. In a desktop browser, it looks exactly the way that I want it to look. When I load it on a mobile device, the information box and legend are too wide and take up too much of the map area. Is there a way to make them display smaller when loaded on a mobile device?

Answer 1

As per general design practice, it would be better if you use a button to alternatively show or hide the legend on mobile devices, instead of making the legend smaller. If you are using jQuery, it would be like the following:

<button type="button" onclick="toggleLegend();">Legend</button>


var showLegend = true;
var toggleLegend = function(){
        if(showLegend === true){
           $('.legend').hide(); 
           showLegend = false; 
        }else{
           $('.legend').show();
           showLegend = true; 
        }
    }

However, if you don't want to use the approach, you can use css media queries to change the size of the legend. Check this example. In style block, add the following

#legend{max-width: 100px}
@media (min-width: 992px) {
   #legend{max-width: 100px}
}