Home Forums Weaver Xtreme Theme Mapped clickable image resizes on mobile devices so doesn't work

Topic Resolution: Resolved

This topic contains 6 replies, has 4 voices, and was last updated by  bobklips 1 week, 6 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #57479


    I have a web page with a map at https://ohiomosslichen.org/moss-atlas/ that consists of a map of Ohio with each county “mapped” so that when a user hovers over it they can navigate to a page of mosses for that county. When the page is accessed ojn mobile devices however, the image is resized and proportioned differently, so the hover/link effect is all messed up. Is there a way to hold stable the map image so that this page style works on devices, or is it perhaps a problematic way to set up a page and should be done differently? (I really like how it works on a regular computer.)

    Bob Klips

    Columbus Ohio USA





    To do this totally correctly, you have to create a fully responsive, resizable map. But this requires making the mapped coordinates responsive as well, and that requires a Javascript plugin. There might be a WordPress plugin to do that, but I don’t know.

    I think you can do a quick fix to it by adding a min-width to the mapped Ohio image so that it doesn’t shrink on phones. I’m not 100% how that will display on a phone, or if the phone adds a horizontal scroll bar.

    But – there are so many tiny counties that I just don’t think you can get a very functional map for a phone even with a responsive map – fingers just aren’t that accurate.

    So you might consider an alternative design for phones to have a map and maybe a drop-down selector for the counties. You could blocks with .is-desktop and .is-mobile to show different things on those devices.



    I had answered this one but apparently my post disappeared…

    The article below gives a potential plugin for a responsive image map (to be tested)


    If not, you could also consider making three different, non scalable, image maps, one for desktop, one for tablets, and one for phones, and insert them using the [show_if] shortcode (find detailed syntax in the Add-ins page) so the proper one shows on the proper device



    Thank you so very much! So far I’ve tried the image sizing set to minimum the same # of px as the original image, and that doesn’t  work on the phone because it only displays a portion of the image, whatever firs on the screen (no scroll bar). I think I will try the different approaches for the 3 device types, either a non-scalable map or (most likely) just a list of counties for the smaller devices (if the responsive map approach isn’t practicable).

    This is greatly appreciated!





    Hi @bobklips

    I use this plugin:


    Still works fine.



    Thank you so very much. I am hopeful that will be the solution I need.

    Much appreciated!




    Update …whoa,, that was super-easy, and it worked! yay!!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.