[SOLVED] Media Query-like behaviour on width of a specific div

Media Query-like behaviour on width of a specific div

I'm building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.

I just ran into a bit of a hurdle as I was trying to add some responsiveness to the styling of the templates: in my template stylesheets, I use a specific id of the preview area to specify where the style should apply. I apply the same id to the body tag of the viewing of the post so that both the preview in the editor and the full view of the post look the same.

I was putting in some media queries on the view side of things and realized that on the preview page, something like @media screen and (max-width: 640px) will behave differently because the preview does not take up the entire width of the screen.

Is there a way I can use a media query selector other than the width of the screen, but instead the width of an element.. or something equivalent? Or could there be another way of mimicking that behaviour simply with javascript..

Solution