Mobile Margins or separate Vertical and Horizontal margin settings.

This topic has 1 reply, 2 voices, and was last updated 6 years, 10 months ago by Rolf.

Viewing 1 reply thread

Author

Posts
- 17 July 2016 at 22:03 #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
- 20 July 2016 at 04:19 #6796
  Rolf
  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…
Author

Posts

Viewing 1 reply thread

You must be logged in to reply to this topic.