Stack Overflow
Stack Overflow

Questions tagged [container-queries]

CSS Container Queries are selector queries that allow you to base a subset of styles on an arbitrary parent selector rather than the viewport.

CSS Container Queries, like media queries, are selector queries. Container queries, however, allow you to base a subset of styles on an arbitrary parent selector rather than the viewport.

46 questions
480
votes
12 answers

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.
yazz.com
  • 57,320
  • 66
  • 234
  • 385
7
votes
1 answer

Container Queries based on height not working

I would want to use the new CSS container queries in modern Safari/Chrome browser. (Safari 16.3, Google Chrome 113.0) However container queries based on height are not working as expected. Expected result: as soon as the outer container turns blue…
Tim Nikischin
  • 368
  • 1
  • 18
7
votes
2 answers

What is the difference between "size" and "inline-size" of container-type CSS property

I am trying to use container-type property to set up a container query that will change alignment of child element, when certain height of container is reached. .snackbar { display: flex; align-items: center; justify-content: space-between; …
mimo
  • 6,221
  • 7
  • 42
  • 50
6
votes
2 answers

How to modify CSS property of element with container-type: inline-size by @container query

I'm looking for solution how to modify property in css of element with container-type: inline-size; (not in children) by @container query. Consider HTML

card 1 title

Everettss
  • 15,475
  • 9
  • 72
  • 98
5
votes
2 answers

Container query collapses width of element

I have the following snippit, where I add container-type: inline-size on a span and a button. This is a span
Rogier de Ruijter
  • 636
  • 8
  • 16
5
votes
1 answer

CSS media queries by div width or height

Is it possible, to specific CSS styles by some DIV width or height? Something like this: @media screen and (max-width: 1024px)
general666
  • 1,001
  • 2
  • 16
  • 31
4
votes
1 answer

How to suppress SCSS linting for 1 line in VS Code?

I've written an SCSS mixin for creating a series of @container rules: @mixin form-grid-double-size-breakpoint($itemSize, $gapSize) { $breakPoint: $gapSize + $itemSize * 2; @container customcontainername (min-width: #{$breakPoint}) { //…
Michel Reij
  • 181
  • 1
  • 6
4
votes
1 answer

CSS container inline-size and fixed child

This is a rough mockup from my project. The parent has a container query, while the child is supported to be fixed (ocasionally). If parent has container query inline-size, child is no longer fixed to page. Can this behavour be prevented? I realize…
Toniq
  • 4,492
  • 12
  • 50
  • 109
3
votes
2 answers

How to use CSS @container query with subgrid?

Let's consider example of cards with only subgrid feature. body { max-width: 500px; margin: 1rem auto; } .container { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 1rem; } .card { border: 1px solid #ccc; padding: 1rem; …
Everettss
  • 15,475
  • 9
  • 72
  • 98
3
votes
1 answer

Why Container Query is not recognised in vscode

Unknown at rule @containercss(unknownAtRules) Unknown property: 'container-type'css(unknownProperties) Unknown property: 'container-name'css(unknownProperties)
Moment
  • 31
  • 2
3
votes
2 answers

CSS Container Queries not rendering

I can't seem to get container queries to work. I'm trying to change the styles of HTML tables using container queries, but the styles within the container are not being applied: table.df-price-table { border: 1px solid #ccc; border-collapse:…
Phil
  • 77
  • 3
3
votes
1 answer

CSS Container queries not working with flexbox space-between

I want to add a CSS container query container for my 2nd child in my flexbox where both children are spaced out using space-between but it is not working. My second child goes off-screen and when I inspect the size of the div.container it says 0px…
Martin Zeltin
  • 2,496
  • 3
  • 18
  • 36
3
votes
2 answers

sass variable not working in container query

SCSS variables don't seem to work when used in a container query. For example this code works just fine: .parent { container-type: inline-size; background: yellow; } @container (max-width: 800px) { .child { background:green; } } See…
Jules Colle
  • 11,227
  • 8
  • 60
  • 67
3
votes
1 answer

Container queries: Why can't I style the container selector in the container query

When using container queries. I can't style the element that the container query is set on in the container query itself. Like below. .container { width: 250px; height: 250px; background-color: hotpink; container-type:…
Rogier de Ruijter
  • 636
  • 8
  • 16
2
votes
1 answer

How can I position z-indexed contained within CSS containers (used for container-queries)

I am very enthousiastic about container queries. Finally, this CSS featured had landed in all browsers. But, when I create multiple subsequent containers, and I put a absolutely positioned z-indexed element in one, a following container covers this…
Ad van Pinxteren
  • 21
  • 2
1
2 3 4