fancybox in my application is opened in bigger size. I specify the fancybox width to 700px, but at same same time I don't want show fancybox to 700px in mobile devices or any smaller devices. 

Is there anyway we can handle this?

```
 $.fancybox.open({
            href: '/ContactSubmission/',
            type: 'ajax',
            padding: 0,
            openEffect: 'fade',
            openSpeed: 'normal',
            closeEffect: 'elastic',
            closeSpeed: 'slow',
            minWidth: 'auto', // can set to 700px
            minHeight: 'auto',
            helpers: {
                title: {
                    type: 'float'
                }
            }
        });

```

Want to remove red highlighted area.

![enter image description here](https://i.stack.imgur.com/kkRqm.png)

```
<div class="row">
    <div class="col-md-7 col-md-offset-1">
        <div class="panel panel-default">
             -----
             ---
         </div>
     </div>
</div>

```