Member Avatar for Violet_82

Hi all, I have come across something weird today. In my HTMl page I have an iframe pulling content from somewhere else. The height and the width of the iframe as set in the CSS. In the head tag of the Iframe there are 2 CSS files, one for desktop and tablets and one for mobile as below:

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/iframeStyles.css" />
    <link rel="stylesheet" type="text/css" href="css/iframeStyles-mobile.css" />
</head>

Now, for some reason that I cannot grasp, only the second CSS takes effect with the result that the iframe and its content have a mobile layout, even in desktp and tablets. What's effectively happening in here is that the mobile rules set in the mobile CSS file are overriding those set in the iframeStyles.css. How is that possible? By the way, the styles in the mobile css are set correctly, all wrapped inside a

@media (max-width:767px){
...
}

Does anybody have any idea why that's happening and how to get around that? I had looked online of course but I could 't find anything particularly useful
thanks

  • 4 Contributors
  • 4 Replies
  • 1K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short version: the iframe's media queries are being evaluated against the iframe's browsing-context (its “viewport”) and/or the cascade/syntax in the mobile stylesheet — so the mobile rules can win even on a desktop page. was on the right track about the iframe width; was right that cascade/order matters, but the real culprits I see most often are (a) the iframe’s effective width is smaller than you expect, (b) a missing/extra brace or global selector in the mobile file, or (c) cross-origin/control issues that prevent you from changing the framed document.

Quick, practical checklist

  • Open the iframe URL in its own tab (right‑click → open frame in new tab) and use DevTools there. Check the computed width of the root element and which media queries the browser reports as “matching.”
  • Validate the mobile stylesheet for syntax errors (an unclosed @media block will leak rules).
  • Look for high‑specificity selectors or !important in the mobile file that override desktop rules even when both apply.
  • Confirm whether the iframe content is cross‑origin. If you do not control the framed page you cannot change its CSS from the parent.

If you control both sides: have the parent send its container width to the iframe and let the iframe switch classes (or apply styles) based on that value. Example pattern:

<!-- parent -->
<script>
function sendWidth(){
  var f = document.getElementById('myFrame');
  f && f.contentWindow && f.contentWindow.postMessage({type:'w', width: f.clientWidth}, '*');
}
window.addEventListener('resize', sendWidth);
sendWidth();
</script>
// inside iframe
window.addEventListener('message', function(e){
  if(e.data && e.data.type === 'w'){
    document.documentElement.classList.toggle('is-narrow', e.data.width <= 767);
  }
});

Then scope mobile rules to .is-narrow in the iframe stylesheet. If you cannot modify the framed page, ask the provider for a responsive embed or increase the iframe’s rendered width. Also note: meta-viewport behavior inside frames varies between browsers, so always confirm with DevTools.

Recommended Answers

All 4 Replies

Member Avatar for rtrethewey

Undoubtedly, the <iframe> is presenting a viewport width that is less than 767px. It could simply be the width of the <iframe> is truly that narrow or the browser isn't calculating the width as you expect. Overall, having a responsive document in an <iframe> inside a responsive document is bound to have some issues along these lines unless the <iframe>d content is very simple.

Member Avatar for almostbob

external stylesheets in reverse order of declaration, last declared is it, the others do not exist
Internal styelsheets kill external styles
Inline styles kill internal stylesheets

media queries ::
there is no media specified for the linked css FILEs, so the last one takes priority and replaces all prior

something like

<link media='screen' rel="stylesheet" href="css/iframeStyles.css" />
<link media='handheld' rel="stylesheet" href="css/iframeStyles-mobile.css" />

would apply styles more as expected

or replace both files with a single file containing 2 media queries
@media screen {}
and
@media screen and (max-width:767px){}

Edited by almostbob
Member Avatar for NetJunkie

I would recommend using percentages rather than pixels when dealing with responsive website creation. This allows you to not have so much work while creating your media queries. Also, iFrames are no longer really supported or used since HTML5 so I would replace the iFrames using tables.

Member Avatar for almostbob

1, tables? tables? wtf

2, media detection, pixels are entirely appropriate to determine physical device size

where is the slap-up-the-side-of-the-head button

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.