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 Quinn. Thanks for your reply. I’ve adjusted the width and height of the lightboxes to match that of the pages. I still have the same problem though. When I open the lightbox from an iOS device, the lightbox is truncated and I’m not allowed to scroll to see the missing parts of the page.

Any thoughts?

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

Sure. The main page is @ unbouncepages.com/about-pace

I have several lightboxes but the one I tried to change the size to match the width and height is linked to the ‘administration’ button. That page is unbouncepages.com/executive-administration.

Hope that helps. Thanks in advance for your help!

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.

That seems better! Just one other question. A gray shadow shows up behind the lightbox when viewing on the ipad. Is that normal?

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>   

UPDATE: 

We’ve released a new feature into beta that allows you to build/launch your lightboxes directly within the page builder itself. This new release will allow you to add images, videos, forms and even scripts (such as Google Maps) to your lightboxes.

Plus, it’s  mobile responsive. 

Go check it out and sign up for the beta here.