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