0

I'm using the Fancybox 3 on the index page of my website (www.chaotickym.com). The page displays correctly on large screensizes such as a laptop, but does not resize correctly when viewed on a mobile phone.

It's as if the page is almost still the same width if viewing on a larger device. The menu is all the way at the far right, and you have to swipe your finger along the very top of the screen over to the right in order to see it.

The other pages on my website display correctly. If I remove the plugin code from my index page, which is then essentially a blank page, the page will display correctly. This leads me to think the display resize issue is related to the plugin.

Is there a way to make it size correctly or is it best to disable Fanybox on smaller devices?

AmyW
  • 313
  • 1
  • 2
  • 15

1 Answers1

0

I found a way to disable Fancybox on smaller devices from another stackoverflow post.

$(".fancybox-img").click( function( e ) {
    if ( window.innerWidth < 799 ) {
        e.stopPropagation();
        e.preventDefault();
    }
})

$(".fancybox-img").fancybox( {
    margin     : 100,
    autoSize   : true,
});

Disable fancybox on handhelds

zahid hasan emon
  • 6,023
  • 3
  • 16
  • 28
AmyW
  • 313
  • 1
  • 2
  • 15