Media Queries Not Working Inside an Iframe

Media queries not working inside an iframe

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

Change

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

@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;
    }
}

CSS media query not working for elements within iframe

use

iframe{
  widht:100%;
}

in your parent html

how use media queries with iframes ? to show different iframe source based on media query

It is possible to achieve this.

Here is an example:

html {  background: blue;}
.container {  position: relative;  width: 100%;  overflow: hidden;  /* padding-top: 75%; */  /* 4: 3 Aspect Ratio; */}
.responsive-iframe,.responsive-iframe2 {  /* position: absolute; */  top: 0;  left: 0;  /* bottom: 0; */  right: 0;  width: 100%;  height: 100%;  border: none;}
@media only screen and (max-width: 400px) {  html {    background: red;  }  .responsive-iframe {    /* position: absolute; */    top: 0;    left: 0;    bottom: 0;    right: 0;    width: 100%;    height: 100%;    border: none;  }  .responsive-iframe2 {    display: none;  }}

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="style.css" />    <title>Document</title>  </head>  <body>    <div class="container">      <iframe class="responsive-iframe" src="https://www.facebook.com/"></iframe>      <iframe class="responsive-iframe2" src="https://twitter.com/home"></iframe>    </div>  </body></html>

iPhone 5 Media Queries Not Working Inside Iframe

Arg, the problem had nothing to do with the media queries not being supported via iframe, or with iPhone 5.

With the iframe being 99% width, and the default 8px margin on the body element, the content inside the iframe thought that the screen was only 301px wide, which was too small to be covered by the 310px width media query, and there were no other rules that caught it.

I fixed it by making the base media query 200px.

@media screen and (min-width: 200px) {
     p { border: 1px solid #f00; }
  }

Media Queries Not Working Inside an Iframe