CSS3 Media Query - Width of container rather than

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/

Answer 1

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/

Answer 2

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.

Answer 3

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/