Menu
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..
327
Take a look: @media only screen and (min-width: 360px) and (max-width: 768px) { // do something in this width range. } The media query above will only work for the feature expression (the screen size of the mobile device that you're writing a style for) provided above.
Media queries aren't designed to work based on elements in a page.
You should use (min-width first): @media screen and (min-width:400px) and (max-width:900px){ ... }
Combining media query expressionsMax-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide.
Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
