Take the 2-minute tour ×

I just want to have 2 types of fancybox size. for mobiles version width: 95%, height: 85% for pc version - width: 85%, height: 80% How can I set these 2 versions up? should I handle in php with 2 script or is there anyway to modify (handle) in a script?

   'width'   : '95%',
   'height' : '85%',
   'autoScale' : false,
   'transitionIn'    : 'none',
   'transitionOut'   : 'none',
   'type'    : 'iframe'
share|improve this question

closed as off-topic by kaiser, s_ha_dum, toscho Aug 4 '13 at 15:04



1 Answer 1

up vote 0 down vote accepted

I am presuming you are using the Easy Fancybox plugin, or some equivalent plugin. Your problem could be solved by applying custom css after Fancybox has loaded, as suggested by the plugin author here. In essence, you can use media-queries to specify the size of the Fancybox to be different on various devices. See for example this article as an introduction on using media-queries.

Also, per the Easy Fancybox FAQ, a fix could be:


The FancyBox 1.3.4 script that is used in thsi plugin was not developed with mobile devices in mind. The only way around this issue is currently to disable FancyBox for small screen sizes. You can do this by adding a text widget in your sidebar with the following code snippet.

<script type="text/javascript">

Tweak the value 500 to target other screen sizes.

Hope this helps, best of luck!

share|improve this answer
thanks so much. –  pulla Aug 11 '13 at 6:08
