Zubair Zubair - 1 year ago 56
CSS Question

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

element they are in. I cannot use the screen size as the
is just used like a widget within the webpage, and its size can vary.


Looks like there is work being done on this now:

Answer Source

No, 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.