Mapping Module Html height

I want to create a homescreen with a big map. I tried to change the height by css but it doesnt work. The height of the map always remains fixed at 500px. I suspect that the problem is that I cannot change the leaflet output via css.

The CSS selector .mapping-map does not help here.

Is there a way to change the height?

The ugly CSS way to fix inline css (used by the mapping module) is to use the !important qualifier in css, e.g.

#mapping-map {
    height: 700px !important;
    width: 100% !important;

This should work, but this will likely impact map size also on other pages of your site, if you have maps elsewhere, unless you have other ways to address only the map on the homepage. Maybe others will have more elegant solutions.

Thank you very much! Didn’t know about the “!imprtant” tag. Since I’m currently planning with only one card, I can live well with this workaround. :slight_smile:

This topic was automatically closed 250 days after the last reply. New replies are no longer allowed.