Answer by Doctert for Can media queries resize based on a div element instead...
I found an easy way to explain it, @Djave did mention something about this type of query, but it was hard to understand... i eventually found the following solution:say we have the following HTML:div {...
View ArticleAnswer by José Salgado for Can media queries resize based on a div element...
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's several polyfills that can help you with that).This API allows you to attach an...
View ArticleClik here to view.
Answer by Djave for Can media queries resize based on a div element instead...
Container queries demoFirst, set up a grid.<div class="grid"><div class="post"><div class="post--content"><h2>Lorem, ipsum.</h2><p>Lorem ipsum, dolor sit amet...
View ArticleAnswer by Jacky Choo for Can media queries resize based on a div element...
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...
View ArticleAnswer by Hendy Irawan for Can media queries resize based on a div element...
I was also thinking of media queries, but then I found this:http://www.mademyday.de/css-height-equals-width-with-pure-css.htmlMaintain the aspect ratio of a div with CSSJust create a wrapper...
View ArticleAnswer by innovati for Can media queries resize based on a div element...
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...
View ArticleAnswer by ausi for Can media queries resize based on a div element instead of...
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) polyfill to...
View ArticleAnswer by Roumelis George for Can media queries resize based on a div element...
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...
View ArticleAnswer by haddnin for Can media queries resize based on a div element instead...
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!
View ArticleAnswer by Marc J. Schmidt for Can media queries resize based on a div element...
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...
View ArticleAnswer by cimmanon for Can media queries resize based on a div element...
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...
View ArticleAnswer by BoltClock for Can media queries resize based on a div element...
Yes, CSS Container Queries are what you're looking for. The CSS Containment Module is the specification that details this feature. You can check browser support here.You can read more about the decade...
View ArticleCan 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...
View Article
