media queries within smaller space
Answered
B33fb0n3 posted this in #help-forum
B33fb0n3OP
Imagine a preview of a blog post. You want to preview the blog post on a desktop version and on a mobile version. If you click the mobile version the container shrinks down to a mobile preview, but the media queries inside this container won't be triggered (because the user is still on desktop and the screensize of the desktop won't change).
How to trigger these media queries inside this container?
---
I saw people using iframe. I can't use iframe, because revalidateTag wouldn't change the content of the iframe, when something is revalidated.
How to trigger these media queries inside this container?
---
I saw people using iframe. I can't use iframe, because revalidateTag wouldn't change the content of the iframe, when something is revalidated.
4 Replies
@joulev Container queries.
https://github.com/tailwindlabs/tailwindcss-container-queries
B33fb0n3OP
yea, that's excatly what I searched for! I read the documentation, but there is no text about what happens, when
@container is missing. I guess it would just take the real screen sizes?@B33fb0n3 yea, that's excatly what I searched for! I read the documentation, but there is no text about what happens, when @container is missing. I guess it would just take the real screen sizes?
I don’t know, you have to try it and see. I wouldn’t recommend using container queries where the availability of a container is not guaranteed, it will just create confusion in future maintenance.
[Container queries are just css by the way.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
[Container queries are just css by the way.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
@joulev I don’t know, you have to try it and see. I wouldn’t recommend using container queries where the availability of a container is not guaranteed, it will just create confusion in future maintenance.
[Container queries are just css by the way.](<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries>)
B33fb0n3OP
oh I didn't know that. I guess then I will just provide a container on top of my document (everytime) it then it should either scale to the browser size (because it's on top of the tree) or scale down to the specific container (if there is another one further down in the tree). Thanks 💋