Mobile Margins or separate Vertical and Horizontal margin settings.

Your Account / Forums / Easy FancyBox Pro / Mobile Margins or separate Vertical and Horizontal margin settings.

  • Author
    • July 17, 2016 at 10:03 pm #6787

      I’ve seen this JS in the WP support FAQ for disabling on mobile:

      <script type="text/javascript">
      var pixelRatio = window.devicePixelRatio || 1;
      if(window.innerWidth/pixelRatio < 641 ) {
        easy_fancybox_handler = null;

      Is there a way to use this not to disable, but to just change the margin setting on mobile?

      I’m currently using fairly large margins to accommodate large outside captions, but would like to disable that on mobile.

      Also, and this would also solve the problem for me — is there a way to have separate vertical and horizontal margins? As I only need vertical margin to accommodate the captions, I’d like to keep the horizontal margins as small as possible. This would also eliminate the problem I’m having on mobile.


    • July 17, 2016 at 10:03 pm #6796

      Hi Michael, in theory it could be done with some CSS rules that override the script’s settings but the problem is that the script takes the margins into account when calculating the position of the light box and its elements.

      When the borders are different then expected, there will most likely occur weird effects due to miscalculations.

      That said, you could try adding (and adapting) these style rules to your theme’s style.css or via the Jetpack module Custom CSS:

      #fancybox-content {
          border-left-width: 10px !important;
          border-right-width: 10px !important;
      @media only screen and (max-width: 640px) {
        #fancybox-content {
          border-width: 10px !important;

      If you can share a link, I can take a closer look at the result and the unexpected effects that may occur…

  • You must be logged in to reply to this topic.