Can media queries resize based on a div element instead of the screen?

Question

I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is jus

Answer 1

I ran into the same problem a couple of years ago and funded the development of a plugin to help me in my work. I've released the plugin as open-source so others can benefit from it as well, and you can grab it on Github: https://github.com/eqcss/eqcss

There are a few ways we could apply different responsive styles based on what we can know about an element on the page. Here are a few element queries that the EQCSS plugin will let you write in CSS:

@element 'div' and (condition) {
  $this {
    /* Do something to the 'div' that meets the condition */
  }
  .other {
    /* Also apply this CSS to .other when 'div' meets this condition */
  }
}

So what conditions are supported for responsive styles with EQCSS?

Weight Queries

• min-width in px
• min-width in %
• max-width in px
• max-width in %

Height Queries

• min-height in px
• min-height in %
• max-height in px
• max-height in %

Count Queries

• min-characters
• max-characters
• min-lines
• max-lines
• min-children
• max-children

Special Selectors

Inside EQCSS element queries you can also use three special selectors that allow you to more specifically apply your styles:

• $this (the element(s) matching the query)
• $parent (the parent element(s) of the element(s) matching the query)
• $root (the root element of the document, )

Element queries allow you to compose your layout out of individually responsive design modules, each with a bit of 'self-awareness' of how they are being displayed on the page.

With EQCSS you can design one widget to look good from 150px wide all the way up to 1000px wide, then you can confidently drop that widget into any sidebar in any page using any template (on any site) and