The lightbox feature works great on a desktop but not on an Ipad or Iphone. Is there a way to fix that? Thanks in advance

Hi Monica - it looks like your lightboxes are set to be wider than the actual page that’s being brought up inside of them. On most desktop browsers, the content will load left justified, so you won’t notice the excess. In most iOS browsers the content tends to load justified to the right, so it’ll be out of view.

That will be compounded by the fact that iPhones only have a 320px viewport, so if your lightbox is set wider than that, you’ll sometimes see display issues on iOS as well.

Changing the lightbox Javascript so the width matches the size of the lightboxed pages should do the trick. And if it is still a bit off centre on an iPhone, adjusting both the width of the lightbox and the lightboxed pages should do the trick.

Hi Monica - are you able to link me to the page? I think we may be looking at different pages in your account.

Hi Monica - I think I’ve found the culprit. You’ll want to turn off the viewport metatag.

The tag will only zoom mobile browsers in on a page that is more narrow than the phone’s viewport. It won’t zoom out to a page that’s larger (and that page is larger than any mobile browser), so it won’t have any affect for mobile users. The viewport tag seems to be conflicting with the FancyBox javascript though. If you uncheck the viewport meta tag option and republish, that should do the trick.

Hi Monica - There’s sometimes an issue with Fancybox on very wide pages. Adding this bit of css that Johnny, our Technical Team Lead, whipped up to the css panel on your page should fix it up though.

<style> <br /> #fancybox-overlay { <br /> position:fixed !important; <br /> } <br /> </style>