Empty map when using responsive layout

Hello Andreas,

glad to hear it works now - thanks for letting us know!
(and also thank you very much for the "other thank you" - much appreciated!

cheers, Frank

Hello Frank,

I have made the change as suggested and removed the width-statement from the LESS which creates the CSS and it works !!!!
I tested the rest of my (limited) website and it seems that it does not break anything.
Whatever the author thought about this setting seems not be be relevant for me.

This stupid line of code has cost me so many nerves, because I investigated for how long, before I opened this thread...
Knowing what to search for in the development-tools really helps.

Many thanks for your help - and of course for initially creating GPXTrackMap!!
best regards,
Andreas

NB: You should find a "small Thank You" in your inbox at info@fra.........ann.de

Hello Frank,

thank you for your quick reply. This looks really good!
I guess I have to deepen my CSS-know-how first, but for sure I will remove this line from CSS and check what it breaks
I really love your plugin ans would like to get rid of the komoot-screenshots and replace them with your plugin.
I will post an update when I am sure that the proposed solution works.

Many thanks,
Andreas

Hi Andreas,
Developer Tools in Chrome are your friend
Right-click on a map tile -> "inspect": this shows that the effect you see comes from a css rule in your template.css:
If i disable the "width: 100% !import;" rule the map tiles reappear; with that rule active their width is set to 0 so they vanish. (see screenshot attached)

So you could try to remove/comment out that line and test if the rest still works, esp. any images. The author of that rule has made that so for some reason (i'd guess).
If this breaks other things, you'd have to dive into the css some more to prevent that rule being applied for the map tiles.

hth & cheers, Frank

I am using Joomla with the Purity_III template with the responsive layout activated.
When opening pages with a gpxtrackmap on a mobile device, only the track will show, but not the map. The same can be reproduced on a PC. Opening the page in full-screen works fine, but when reducing the width of the window so that the responsive layout kicks in, the map disappears and only the track remains.
I tried to analyze with the developer tools what's going on and it seems to be related to the tile-sizes, but could not figure out, what's wrong.

If I change the layout to be non-responsive, everything works find (Besides the fact that the page is not really usable on a mobile the device. That's why responsive has been introduced).

An example where this can be reproduced can be found here:
aweifb.de/tests
In the attachements, you can see it working on the big screen and not working when the window-width is reduced.

As the demos work fine (also on my mobile phone) this cannot be a general issue, but must be something specific.
Any help is really appreciated!

best regards,
Andreas