Responsive Design using pop ups (image and html) on imagemap

[RobertMcI]

Hi Folks
I have a page with an imagemap and am using image with html in popups.
The popup is working on all devices but on small screens it extends out of the viewport on mobile devices.
I can't seem to affect this behaviour with any setting.
All of may other implementations of highslide (galleries, etc) behave properly.
Any thoughts or tricks?
Here is the page url: https://www.summitpacific.ca/about/campusmap.php
Rob McIntyre

[MisterNeutron]

Offhand, I don't think there's any way to beat this completely. But first, you've got the minimum image width specified incorrectly. It's case-sensitive, and it takes an integer value, not a string, so it needs to be:

Code: Select all

hs.minWidth=100;

That will make your popup a minimum of 350px wide (100px for the image, 250px for the caption), plus a bit for the outline.

(You've got a few other errors on the page, unrelated to the popups, like unclosed anchor tags. Run the code through a validator.)

[RobertMcI]

Thanks for that.
Fixing the case sensitive error resolved the resize and it the initial pop up does now open with in the width of the media port.
Yes, code is still untidy - I'll clean that up.
Your help is much appreciated.
Rob Mc

[MisterNeutron]

Glad that took care of it!

Side panel captions are a bit of a problem, since they're of a fixed width. Captions above or below the image more easily adapt to the size of the viewport. On the other hand, captions above or below never produce scrollbars, so they might take up too much space. But scrollbars within a small popup on a small-screened mobile device might be tough for users, anyway. Lots of conflicting "but on the other hand" considerations.