StepUp StepUp - 1 month ago 11
CSS Question

Style is not applied to iframe after deployment to web server

I am using

id
selector to set style for
iframe
:

<div class="text-center">
<iframe src="@Url.Content("~/HTML/slideView.html")" id="iframeStyle"
marginheight="0" marginwidth="0"></iframe>
</div>


and CSS:

@media screen and (max-width: 1199px) and (min-width: 401px) {
#iframeStyle {
width: 700px;
height: 400px;
max-width: 100%;
overflow: hidden;
border: none;
}
#idImg {
width: 700px;
height: 400px;
}
}

@media screen and (max-width: 400px) {
#iframeStyle {
width: 360px;
height: 190px;
max-width: 100%;
overflow: hidden;
border: none;
}
#idImg {
width: 360px;
height: 190px;
}
}


metadata:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

</head>


It works perfectly at localhost and
#iframeStyle
is always resized when width of the browser is more than
400px
or less
400px
.

However, after deploying to smarterasp.net, then
#iframeStyle
is always set to
@media screen and (max-width: 400px)
even I open the web site at wide display(at Personal Computer). That is, I always see is just small
iframe
and the size is not changed if I even resize the browser.

How to set properly style for
iframe
?

Answer

It loosk correct, i would suggest to

  1. have a fall back to be before the media-query and see what it does.
  2. Add !important tag and see if it works.

  3. Check the dev-console and see which one is being used and if anything changes when you resize the window

    enter image description here

pls let me know which one worked for u :)

Update:

Cause you are loading styles through Razor:

@Styles.Render("~/Content/css")

then the style is not applied to plain html page.

Just load CSS without Razor and style will be applied to your html page:

<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />
Comments