CODEWITHSUNDEEP
htmlcssiframe
authorandrew
authorandrew

Reputation: 185

Loading iframe-size-specific media queries

I'm trying to load several instances of the same HTML for a responsive ad. Ideally, this ad would all pull from the same HTML source (ad.html), and then feature different responsive CSS for each size of the ad. Then, all we need to do is specify the size of the iframe to be one of the options we've configured, and it's a drop in solution for multiple ad sizes.

Now, here is the problem. The ad's CSS, when loading inside a sized iframe, doesn't recognize the size of that iframe as its bounding box, but instead the entire browser. Thus, our size-specific media queries fail, and the whole idea is kind of pointless without that.

Is there a way to do what I'm trying to do? I'm using simple min and max-width on the media queries, so unless I'm mistaken they should be loading to the dimensions of the iframe.

Upvotes: 2

Views: 331

Answers (1)

authorandrew
authorandrew

Reputation: 185

I was able to solve this by changing my media queries from min-width to max-width. Once I did this, browsers correctly recognized the media queries for each specific iframe.

Further, IE won't recognize four media queries if you're loading the same iframe multiple times on one page.

Upvotes: 1

Related Questions