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

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 just used like a widget within the webpage, and its size can vary.


Looks like there is work being done on this now: https://github.com/ResponsiveImagesCG/cq-demos

This question is related to css media-queries

The answer is

After nearly a decade of work — with proposals, proofs-of-concept, discussions and other contributions by the broader web developer community — the CSS Working Group has finally laid some of the groundwork needed for container queries to be written into a future edition of the CSS Containment spec! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.

Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).

Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.

If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.

Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.

I've just created a javascript shim to achieve this goal. Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work.


A Media Query inside of an iframe can function as an element query. I've successfully implement this. The idea came from a recent post about Responsive Ads by Zurb. No Javascript!

This is currently not possible with CSS alone as @BoltClock wrote in the accepted answer, but you can work around that by using JavaScript.

I created a container query (aka element query) prolyfill to solve this kind of issue. It works a bit different than other scripts, so you don’t have to edit the HTML code of your elements. All you have to do is include the script and use it in your CSS like so:

.element:container(width > 99px) {
    /* If its container is at least 100px wide */


From a layout perspective, it is possible using modern techniques.

Its made up (I believe) by Heydon Pickering. He details the process here: http://www.heydonworks.com/article/the-flexbox-holy-albatross

Chris Coyier picks it up and works through a demo of it here: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

To restate the issue, below we see 3 of the same component, each made up of three orange divs labelled a, b and c.

The second two's blocks display vertically, because they are limited on horizontal room, while the top components 3 blocks are laid out horizontally.

It uses the flex-basis CSS property and CSS Variables to create this effect.

Final example

  display: flex;
  flex-wrap: wrap;
  border: 1px solid #f00;
  $breakpoint: 600px;
  --multiplier: calc( #{$breakpoint} - 100%);
    min-width: 33%;
    max-width: 100%;
    flex-grow: 1;
    flex-basis: calc( var(--multiplier) * 999 );


Heydon's article is 1000 words explaining it in detail, and I'd highly recommend reading it.

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, <html>)

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

The question is very vague. As BoltClock says, media queries only know the dimensions of the device. However, you can use media queries in combination with descender selectors to perform adjustments.

.wide_container { width: 50em }

.narrow_container { width: 20em }

.my_element { border: 1px solid }

@media (max-width: 30em) {
    .wide_container .my_element {
        color: blue;

    .narrow_container .my_element {
        color: red;

@media (max-width: 50em) {
    .wide_container .my_element {
        color: orange;

    .narrow_container .my_element {
        color: green;

The only other solution requires JS.

The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. For example, let's say you decide to make your container's 50% of the screen width. Then for a screen width of 1200px you know that your container is 600px

.myContainer {
  width: 50%;

/* you know know that your container is 600px 
 * so you style accordingly
@media (max-width: 1200px) { 
  /* your css for 600px container */

I was also thinking of media queries, but then I found this:

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

div {_x000D_
  width: 100%;_x000D_
  padding-bottom: 75%;_x000D_
  background:gold; /** <-- For the demo **/_x000D_

It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).

This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.

It's enough for my needs. Which might be enough for your needs too.

You can use the ResizeObserver API. It's still in it's early days so it's not supported by all browsers yet (but there several polyfills that can help you with that).

Basically this API allow you to attach an event listener to the resize of a DOM element.

Demo 1 - Demo 2

For mine I did it by setting the div's max width, hence for small widget won't get affected and the large widget is resized due to the max-width style.

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;

Questions with css tag:

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Font Awesome 5 font-family issue Failed to load resource: the server responded with a status of 404 (Not Found) css CSS class for pointer cursor How and where to use ::ng-deep? Styling mat-select in Angular Material What is the difference between CSS and SCSS? iPhone X / 8 / 8 Plus CSS media queries Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? Add class to an element in Angular 4 CSS Grid Layout not working in IE11 even with prefixes Search input with an icon Bootstrap 4 Bootstrap 4 - Inline List? Centering in CSS Grid Bootstrap 4, how to make a col have a height of 100%? Equal height rows in CSS Grid Layout Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes How to style a clicked button in CSS How can I get the height of an element using css only display: flex not working on Internet Explorer force css grid container to fill full screen of device How does the "position: sticky;" property work? bootstrap 4 row height Prevent content from expanding grid items Bootstrap 4 File Input CSS hide scroll bar, but have element scrollable CSS grid wrapping Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Cannot read property 'style' of undefined -- Uncaught Type Error How to window.scrollTo() with a smooth effect Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? CSS change button style after click What is correct media query for IPad Pro? How do I specify row heights in CSS Grid layout?

Questions with media-queries tag:

iPhone X / 8 / 8 Plus CSS media queries What is correct media query for IPad Pro? How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript? CSS media query to target only iOS devices How to set portrait and landscape media queries in css? iPhone 6 and 6 Plus Media Queries Responsive design with media query : screen size? Bootstrap 3 breakpoints and media queries $(window).width() not the same as media query How to make responsive table Twitter Bootstrap 3: how to use media queries? How to remove responsive features in Twitter Bootstrap 3? Common CSS Media Queries Break Points Bootstrap - Removing padding or margin when screen size is smaller Retina displays, high-res background images Responsive css styles on mobile devices ONLY Detect if a browser in a mobile device (iOS/Android phone/tablet) is used Media Queries - In between two widths CSS media queries for screen sizes What Are The Best Width Ranges for Media Queries @Media min-width & max-width iPhone 5 CSS media query Can media queries resize based on a div element instead of the screen? CSS media queries: max-width OR max-height Media query to detect if device is touchscreen Is it possible to put CSS @media rules inline? What is the difference between "screen" and "only screen" in media queries? CSS media query to target iPad and iPad only? Why are my CSS3 media queries not working on mobile devices? Get the device width in javascript What is the difference between max-device-width and max-width for mobile web? Media Queries: How to target desktop, tablet, and mobile? IE8 support for CSS Media Query How to detect the device orientation using CSS media queries? What does @media screen and (max-width: 1024px) mean in CSS? CSS @media print issues with background-color;