Setting legend area proportion on webmap produced by qgis2web for a mobile phone/tablet

Question

I have produced a webmap using qgis2web tool using the open layers option. It is hosted on a remote server. Viewing it on a desktop/laptop is fine. However when i try to view the same using a phone,i find that the legend is taking up most of the screen space!

How do i edit the code to allow the legend to take up specific percentage of available screen space?

@image is how it is displaying on a mobile phone

Answer 1

Firstly, I would consider setting the layers list to collapsed in the qgis2web dialog rather than expanded, as that is probably most appropriate for mobile use.

However, if you do want an expanded list, you can make it narrower. Find your exported map, and open resources/ol3-layerswitcher.css in a text editor. Find this code:

.layer-switcher .panel {
    padding: 0 1em 0 0;
    margin: 0;
    border: 4px solid #eee;
    border-radius: 4px;
    background-color: white;
    display: none;
    max-height: 100%;
    overflow-y: auto;
}

Add max-width as follows:

.layer-switcher .panel {
    padding: 0 1em 0 0;
    margin: 0;
    border: 4px solid #eee;
    border-radius: 4px;
    background-color: white;
    display: none;
    max-height: 100%;
    max-width: 150px;
    overflow-y: auto;
}

Obviously change the value to suit your needs. If you reexport via qgis2web, you'll have to repeat this change.