Media queries not working inside an iframe

Question

I have in a webpage which is responsive. It makes use of media queries. But the same page loaded in an iframe is not working. For example, consider to my webpage, I have given background color as red when the screen-width is less than 640px. ``` @media only screen and (max-device-width : 640px) { .header-text { background-color: red; } } ``` So when I load that window in a new tab and make the browser width less than 640px, background color becomes red. But the same window when loaded in an iframe of 320*480 dimensions does not have background color red. How to make media queries work in an iframe?

Accepted Answer

Try it this way, instead of `device` just target the `width`

Change

```
@media only screen and (max-device-width : 640px) {
```

to

```
@media only screen and (max-width : 640px) {
```

Also, it is more advised to target both min and max view-port width if you want to avoid considering order of media query declarations in your style-sheet

```
@media screen and (min-width: 320px) and (max-width: 640px) {
    .header-text {
       background-color: blue;
    }
}
```

Media queries not working inside an iframe

Solution

Problem

Related problems