near ruin
Hi all, I am trying to implement some global media queries on my project but can't make them to work. I tried testing both global scoped style in Layout.astro file and component scoped style and it doesn't work. If anyone could guide me in the right direction I would be grateful . Thanks
EDIT: I am using vanilla CSS.
safe owl
style tags are scoped by default meaning they will only apply styles to elements directly inside the file, you could try using Global Styling to opt of this scoping
https://docs.astro.build/en/reference/directives-reference/#isglobal
https://docs.astro.build/en/guides/styling/#global-styles
near ruin
Hey, thanks for the reply. As per my post I did try the global styling already. Everything works fine, apart from media queries:/
safe owl
Ahh, I got confused because it says "global scoped style", I tested this media query in a <style> tag and it worked for me, what does your full style tag looks like?
near ruin
My bad, wrong wording:) the screenshot has different media query but it doesn’t work either. Thank you for looking into it
safe owl
My bad, wrong wording:) the screenshot has different media query but it doesn’t...
Looks like you missed the screen and part of your query like @media screen and (max-width: 600px)