Mobile Margins or separate Vertical and Horizontal margin settings.

Home Forums Easy FancyBox Pro Mobile Margins or separate Vertical and Horizontal margin settings.

This topic contains 1 reply, has 2 voices, and was last updated by  RavanH 1 year ago.

  • Author
    Posts
  • #6787

    Michael McHugh
    Participant

    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;
    };
    </script>

    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.

    Thanks,
    Michael

  • #6796

    RavanH
    Keymaster

    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.