@media
hi all,
there is a problem when i'm setting media queries. whenever i do this:
it doesn't change the layout at
1024px, instead, it does so at 920px
why does it do that?6 Replies
It shouldn't, perhaps there's another media query interfering.
hmm, yeah, i suppose so yeah
does the positioning of the media query code matter? in the css file?
if it's above all the code, below all the code, or in the middle of the code?
Yes. It still cascades. If you do “mobile first” style sheets you want all the default styles for mobile at the top and then you want to order your media queries for breakpoints as they get larger and large while you move further down the stylesheet.
etc.
If you do a “desktop first” style sheet, it’s the same thing. Big layouts at top and then smaller and smaller “max-width” queries in order from largest to smallest as you move down the stylesheet.
dang, i tried that, it's still the same issue
okay, found out what the problem was, which i find super odd/weird
so when i right click on my
index.html and then click on "open with live server", the media query at 1024px doesn't work the page shown on the live server doesn't work, however, if i go into my files and open that same index.html file manually, works perfectly fine
weird..Bizarre. That almost sounds like maybe your browser cached an old version of the css with the media queries still out of order? Maybe try a hard reload (might have to Google for your specific browser) but I’m chrome for Windows, that’s “ctrl + f5” and on Mac, “cmd + shift + R”
i'll try that out, thanks