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?

1 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){
           showLegend = false; 
           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}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.