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
    Posts
  • #57479

    bobklips
    Participant

    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

     

     

    #57495

    Weaver
    Keymaster

    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.

    #57498

    scrambler
    Moderator

    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)

    https://stackoverflow.com/questions/7844399/responsive-image-map

    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

    #57500

    bobklips
    Participant

    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!

     

    Bob

    #57504

    Gillian
    Moderator

    Hi @bobklips

    I use this plugin:

    https://wordpress.org/plugins/responsive-image-maps/

    Still works fine.

    #57513

    bobklips
    Participant

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

    Much appreciated!

    Bob

    #57514

    bobklips
    Participant

    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.