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

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.