1

I develop Javascript interactives for a publication that has a 325px left navigation rail on desktop that gets hidden if the width of the page goes below 800px.

This means the space for the content on the right, where my interactives go, accordions in width like so:

Above 800px total page width, the content well is (width - 325px). Not counting the margins, this gets down to about 380px just before the breakpoint activates.

Below 800px, the content gets the whole width of the page.

I use basic min-width and max-width CSS media queries to govern the page's behavior for different screen-sizes. All I care about is the width of the interactive, and I would prefer not to have to hard code in the breakpoints written into the CMS (which could change without notice.)

Is there any way for @media (max-width: 600px) to refer to a container's width, not the width of the page?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Chris Wilson
  • 6,599
  • 8
  • 35
  • 71
  • No...not yet. It's been suggested but not likely to be seen for some time. - http://responsiveimagescg.github.io/eq-usecases/ – Paulie_D Jun 20 '14 at 15:38
  • 1
    Good article about this by Ian Taylor - http://ianstormtaylor.com/media-queries-are-a-hack/ might be worth reading. It would be nice if `@element` was eventually included in the spec. – Nick R Jun 20 '14 at 16:17
  • Currently not possible, in my article http://d6u.github.io/react-container-query/, I listed some polyfills for that. – Daiwei Jan 06 '16 at 04:45

0 Answers0