Geek Answers Handbook

Media Query-like behavior on the width of a specific div

I am creating an editor in which the content of the message is loaded into a div, and jQuery selectors allow me to edit the inline content.

I just ran into a bit of an obstacle as I tried to add responsiveness to the layout of the templates: in my template style sheets, I use a specific preview area identifier to indicate where the style should be applied. I apply the same identifier to the body tag of the message view, so the view in the editor and the full view of the message look the same.

I posted some multimedia queries on the side of the things overview and realized that on the preview page something like @media screen and (max-width: 640px) would behave differently because the preview does not take up the entire width of the screen.

Is there a way to use a multimedia query selector different from the width of the screen, but instead the width of the element .. or something equivalent? Or there may be another way to imitate this behavior simply using javascript ..

+7
source share
2 answers

Unfortunately, there is currently no way for a display request to target a div. Media queries can only be oriented to the screen, which means a browser window, a mobile device screen, a TV screen, etc.

+8
source

I am currently using:

 .preview { zoom: .8; -moz-transform: scale(0.8);}

when div.preview is 80% of the width of the page. It usually works, but with a few problems, and it is not completely flexible, since the divs in question will not always be set to% of the page width.

-one
source

More articles:


All Articles