56 questions
0
votes
0
answers
30
views
How do I use container query units with font-size? [duplicate]
I want font-size to be 100% of its container width. If the container is 500px then the font-size should be 500px. I am not getting it to work as the heading is breaking out of the container. Am I ...
- 442
1
vote
2
answers
335
views
Container Queries not working with Tailwind v4 and Next.js 15 [closed]
I am having an issue with my Next.js app. I upgraded to Tailwind 4 and as I understand the docs, there should be build in support for container queries. But the following code doesn't seem to work:
&...
- 197
3
votes
1
answer
93
views
Container Queries SCSS file
I want to use a container query to detect the height of the parent div and adjust the child's height accordingly; however, after following tutorials, reading numerous blog posts, and verifying that I ...
- 740
1
vote
0
answers
47
views
Do I need another div to set font-size as percentage of div width?
I have a div and I want its font-size to be a percentage of its width.
I can mark the div with container-type: inline-size;, put in another div and set its font-size in cqw units. It works.
Is there a ...
- 367
2
votes
1
answer
310
views
@container queries don't change grid-template-columns value
Having a page where we require that if container width is below view size then change 5 columns into 2 columns and trying below:
.list {
background-color: grey;
display: grid;
grid-gap: 4px;
...
- 54.2k
4
votes
3
answers
209
views
How do I middle align a container parent?
I have a main grid. Its grid items are also containers (container-type: inline-size), which helps with giving them various internal layouts depending on their width.
How can I middle align main once ...
- 37.6k
1
vote
2
answers
724
views
How to Redefine CSS Custom Property Value for :Root Within Container Query Body?
I'm trying to set a CSS custom property within the :root and then change the value depending on the container's size using a container query, but it's not working. Here's an example:
<div class=&...
- 1,236
2
votes
2
answers
2k
views
How to override the value of a CSS variable inside a container query
At the :root level a CSS variable is declared with a value. This variable is used to style elements.
Inside a container query a new value is assigned to the variable. The styled elements should change ...
- 23
0
votes
0
answers
186
views
How to use @ as a class name with Razor Syntax for TailwindCss
TailwindCss Container Queries prefix with a @ ...but also that's how we reference things in Razor syntax.
https://github.com/tailwindlabs/tailwindcss-container-queries
How can I use container query ...
- 1,912
1
vote
0
answers
1k
views
Why does container-type: inline-size (for container queries) seem to break CSS grid's minmax(min-content, max-content)?
I've got a CSS layout that relies upon CSS grid's minmax(min-content, max-content) for responsively laying out many of its elements. Here's a reduced example:
html, body { margin: 0; padding: 0; }
...
- 7,478
0
votes
1
answer
1k
views
Tailwind Container Query not working with padding
I'm attempting to use the container query plugin for Tailwind but my container query is breaking (not generating the class) when I add padding to the parent. When I remove it, all of a sudden it works?...
- 39
5
votes
2
answers
666
views
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;
}
....
- 16.2k
2
votes
1
answer
402
views
How to use specific divs to measure Bootstrap's breakpoints?
Can Bootstrap 5 provide responsive layouts for two columns whose mutual, vertical border can be dragged? Answer: Yes, by reconfiguring Bootstrap to use container queries rather than media queries. ...
- 849
4
votes
1
answer
2k
views
How can I position z-indexed contained within CSS containers (used for container-queries) [duplicate]
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 ...
4
votes
2
answers
2k
views
If the height of the element with `container-type: size` become 0, what is the practical benefit of `container-type: size`?
AFAIK The of container queries concept is the applying of the conditional CSS rules depending on unknown at advance container size. However, once container-type: size applied (what it required to make ...
- 1,078
5
votes
0
answers
661
views
How can we get CSS @container queries to consider the viewport to be the root container?
Container queries seem like such a great addition to CSS, one that I've been looking forward to for years. But having just started using them, I've run into this issue.
@container queries do not fall ...
- 1,404
-1
votes
2
answers
769
views
how do container queries / contain property make my container disappear
Could you explain what makes my pictures disappear ?
span,
figure {
container-type: inline-size;
margin: auto;
max-width: 10%;
float: right;
}
.image img {
max-height: ...
- 29
2
votes
1
answer
1k
views
calc() with CSS property inside CSS container query doesn't seem to work
I have the following CSS:
:root {
--some-number: 0;
}
.header-nav {
container: header-nav-container / size;
}
@container header-nav-container (width < calc(400px + (var(--some-number) * ...
- 3,251
4
votes
1
answer
2k
views
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 ...
- 3,328
21
votes
1
answer
6k
views
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;
...
- 6,967
5
votes
1
answer
871
views
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 ...
- 346
9
votes
1
answer
4k
views
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 ...
- 5,146
8
votes
3
answers
2k
views
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
<div class="card card--1">
&...
- 16.2k
4
votes
1
answer
4k
views
Does Material UI already support CSS Container Queries?
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
Container queries for CSS are quite recent. Is MUI 5.0 already capable of using them? Unfortunately, the SxProps do not have them....
- 329
2
votes
0
answers
37
views
Set breaking point based on wrapper and not screen size [duplicate]
I am building a website that have different pages which will have wrappers with different width. I would like to set breaking points for inner divs based on the wrappers and not the screen size. Is ...
- 1,298