CSS3 Media Query - Width of container rather than screen?

Question

I have not yet seen this question asked on here but I was wondering if anyone knows if it is possible to have a media query based on a container or parent element that was based on it width. The user case for this is when you have a menu that pops in from the left and decreases the size of the main windows container. Here is an example website where you can see the menu pops open but the content on the page cannot change based on its new width

http://tympanus.net/Tutorials/FullscreenBookBlock/

http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen This maybe? And no, it's not possible. — BoltClock, Jan 23 '13 at 09:16
So this cannot be done with css3 until an @element property is added. If anyone is using an efficient javascript or jquery approach to handle this use case then I would accept that as an answer — 2ne, Jan 23 '13 at 09:19
I am still actively searching for an answer to this nearly year old question and today I found this: http://codepen.io/2ne/pen/zxBVjR?editors=110 I dont know how it works but it looks like it does answer the question — 2ne, Dec 22 '14 at 09:43

score 7 · Answer 1 · answered Jul 01 '13 at 15:56

7

I've been looking into this too. So far I've been impressed with Andy Hume's approach http://blog.andyhume.net/responsive-containers/ https://github.com/ahume/selector-queries/

answered Jul 01 '13 at 15:56

Jeff Schram

71
1
2

score 1 · Answer 2 · answered Jan 23 '13 at 13:41

I think you want something different than what you're asking for.

Media-queries are meant to query something specific to the device (media) you use, not to do animations or other visual stuff.

To rebuild the example you posted here is fairly simple to rebuild, but has (excepted for it's responsiveness) nothing to do with media-queries.

They created a normal page, having two states. In the one state only the content is visible and in the other state the menu is visible and the content is partly (taken the width of the menu) moved out of the screen.

You declare which element and which option should be transitional. Here's an example, where I configure that changing width or margin of an element will start an animation which takes 3sec:

div {
  transition: width 3s, margin 3s;
  -moz-transition: width 3s, margin 3s;
  -webkit-transition: width 3s, margin 3s;
  -o-transition: width 3s, margin 3s;
}

Toggling between these two states is done by adding a css-class and the animation you see is configured by a CSS3 setting called transition.

I recommend reading something like https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

FYI: I rebuild something like the website you showed, just as a prove of concept: http://jsfiddle.net/W3PF4/

score 1 · Answer 3 · answered Jan 23 '13 at 13:42

No you can't media query that way but what you are asking for can be done with css. I've been doing it for my website and guys at sitepoint helped out quite a bit - See post 11 here: http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p=5061986&viewfull=1#post5061986

When the sidebar opens it squishes the content to the right & it's content centres within. Of course you could do this with out the centring content and it'll do what you're intending.

CSS3 Media Query - Width of container rather than screen?

3 Answers3

Linked