Reduce width on small screens

  • Resolved Tom2708

    (@tom2708)


    3 years, 1 month ago

    Hello,
    I have installed your plugin on the mentioned URL. It works properly! I have just a problem on smaller screens. The map has more width than the screen. I tried several variations with [empty], auto, px, % and vw but I could not find a good solution. I saw that the map on https://leafletjs.com/ fits on small screens, too. So, your help would be appreciated.

    Many thanks in advance
    Thomas

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor hupe13

    (@hupe13)

    What shortcode you are using? [leaflet-map width="..."] should work.
    I have not yet found that there are problems with this. Possibly it is due to the blocks used. The block “Route hierhin” may be the reason.

    Thread Starter Tom2708

    (@tom2708)

    Hi hupe13,
    please have a look on these codes and the attached screenshots:
    1) [leaflet-map lat=48.09364556624344 lng=11.363017559050014 zoom=15 zoomcontrol !detect-retina width=”100%”] – this one puts on desktop some whitespace between the map and the next block; see: https://www.enyore.com/wp-content/uploads/2022/02/whitespace.png
    2) [leaflet-map lat=48.09364556624344 lng=11.363017559050014 zoom=15 zoomcontrol !detect-retina width=”400px;”] – this gives the map more width than the screen has on mobile, e. g. 375px; the map should be reduced to the red line; see: https://www.enyore.com/wp-content/uploads/2022/02/reduced-width.png

    Your suggestions wold be very much appreciated. Thanks in advance!
    Thomas

    Plugin Contributor hupe13

    (@hupe13)

    If it were my website, I would put the map and the “Route hierhin” in a table with two columns: one column a figure with the map, the other a figure with “Route hierhin”.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reduce width on small screens’ is closed to new replies.

Tags