How to apply media query CSS rules to iframe content

Question

I've got this set of code I would like to apply to my iframe, but it doesn't work.

@media only screen
and (min-width : 320px)
and (max-width : 480px) {
#postframe article{display:none;}
}

Thank you.

Solution

Solved… My iframe width was 960px, so until you don't change width to 320px it could not recognize the media query!!

Thanks all

Comments

[Neil]

Why can't you serve the frame's document with that CSS in the first place?

[Luca Frank Guarini]

Ok! For example the last line you wrote should be something like this: frames['#postframe'].document.body.article(display:none); ? And where should i insert media queries?

[Luca Frank Guarini]

I've got a wordpress theme where posts are loaded inside an iframe. The single loop page of projects is named "single.php"… I can't define @media only screen and (min-width : 320px) and (max-width : 480px) { #postframe article{display:none;} } also if I try to write it inside head tag of single.php! Why this?

[Pavlo]

Accept your answer then.