Hi,
My website is fine but I wanted to get frisky, and try my hands on container queries.
I have the class .image, which apply to either figure or span depending on the context (respectively a block-level or inline-level element). They behave exactly the same, with the float property.
Now I use media queries to change the layout when they get too small for comfort on a mobile phone. It's enough for my need.
But I wonder if I can query the actual width and height of my image with container queries ?
So whenever they get smaller than say, 4cm, a different layout of image applies, taking the whole viewport width for instance.
For now the only code that actually does something is this:
in .image you can add width:auto.
Do you also have a container-type rule?
I haven't tried this, but as I understand it this is a requirement.
To use container queries, you need to declare a containment context on an element so that the browser knows you might want to query the dimensions of this container later. To do this, use the container-type property with a value of size, inline-size, or normal.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
By the way, I can edit but not remove my own message... this primitive forum is really irritating, time to change for God's sake !
Ok I found a solution.
I think position:absolute don't just make things float, it places them one level above on the DOM tree, on the level of their immediate parent.
So yeah that would not work.
It sufficed to place the content property on <article>, not main, so not on the parent of header but its sibling, on the same level. That way <header> is not contained anymore.
I learnt something, maybe others people reading this will :-)
well, then those choices are a pain in the arse for users X-D
Really? Why?
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)