Question

I am using Fancybox 2, and have a mediaquery which looks like this:

@media (max-width : 1200px) {

#columnset1_column1 {
    display: none;
}
#sitelayout6 {
    width: 980px !important;
}
#columnset3 {
    display: block;
}
#columnset2 {
    margin-top: 70px;
}
}

But the weird thing is the media query is trigger when a lightbox which shows a iframe. The page it shows is only 700 px wide.

It is only a problem in Internet Explorer, not Chrome.

The window size is not resize at any point.

Answer 1

I found an answer here that helped:
Fancybox 2 Forcing Responsive Media Queries in IE

Basically, in the iframe, update the references to your CSS to include a query string…

So in your parent page, you have:

<link rel="stylesheet" href="screen.css" />

and in your iframe, you have

<link rel="stylesheet" href="screen.css?iframe=true" />

This gets around a bug in IE which is causing the iframe to trigger the media query in your css for the parent page.