Override WordPress theme styles

[hencheck94]

Hi, Sorry for asking again a maybe stupid question.

After applying your solution for my first problem (adding a leaflet-map-container element around the map) , I stumbled upon another problem.

When using the standard Wordpress Theme Twenty Twenty, the map and altitude graph get displayed as expected in (Firefox, Chrome, Safari). But when changing the theme to, in my case, Fabulist it isn't anymore:

• In Safari it shows a map without the trail and without the altitude graph.
• In Firefox it shows the map again without the trail visible but with an somewhat disturbed altitude graph under it..

Do you have any idea what in the Theme may cause this and how to prevent it? Thank you in advance!

[Raruto]

Hi Jan,

in your parent theme you have the following css rule:

svg {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}

so in your child theme you would insert something like this:

.leaflet-map-container svg {
    height: auto;
    width: auto;
}

As you can see, this happens because the elevation chart profile is a valid SVG element.

Greetings, Raruto

[hencheck94]

Thank you very very much! You solved it again :)