Container query issue
Hi
Am building a shopping cart here: https://stage.dembetheatre.org/cart.php
I have some nice grid and flex working inside container queries
on the <section class="basket">
I have a nested header element and cart items all in a subgrid
I have allocated the first cell a width of 300px
BUT
The continer query is not recognising the .basket items in the @container:
@container (min-width: 768px) {
.basket { grid-template-columns: 300px 1fr 1fr 100px; grid-template-rows: auto; }
}
@container (min-width: 1200px) {
.basket { grid-template-columns: 300px 1fr 1fr 100px 60px; grid-template-rows: auto;}
}
Also in min-width:1200
this is not working either .bkheader span:nth-of-type(3) { grid-column: 4 / span 2; }
I cannot figure out why the container is ignoring .basket and why the last header item will not span the 2 columns!!!
Am building a shopping cart here: https://stage.dembetheatre.org/cart.php
I have some nice grid and flex working inside container queries
on the <section class="basket">
I have a nested header element and cart items all in a subgrid
I have allocated the first cell a width of 300px
BUT
The continer query is not recognising the .basket items in the @container:
@container (min-width: 768px) {
.basket { grid-template-columns: 300px 1fr 1fr 100px; grid-template-rows: auto; }
}
@container (min-width: 1200px) {
.basket { grid-template-columns: 300px 1fr 1fr 100px 60px; grid-template-rows: auto;}
}
Also in min-width:1200
this is not working either .bkheader span:nth-of-type(3) { grid-column: 4 / span 2; }
I cannot figure out why the container is ignoring .basket and why the last header item will not span the 2 columns!!!
