Media Queries not firing properly

Hey all,

Having a bit of an issue. I've got a bunch of media queries but I'm finding that everytime I open up my project I have to redo the media queries. Mobile view for example I'll have the height of a section at 12vh. If I load this project up tomorrow I will have to remove that media query and add the exact same query in the exact same stylesheet for it to work. Really unsure as to why it's doing this and I've never had it before but when I check the browser I'm not getting any errors it just syas "filter rule containing this property and if I am in lets say the max-width 360px media query, for some reason it is using the max-width 1200px query and I'm super connfused as to why it's doing this.

can anyone help at all? Not sure if it's me being stupid or the program...

Thanks Rob

Try rearranging your media queries, they may just be in the wrong order which is sometimes confusing in the app.

Max width? Are you using Bootstrap 3?

@Jo I'll try reorganising them a bit and see if that works

@Printninja, No Bootstrap 4. I've always used max-width for everything and never had a problem with it until now.

Very weird, I have got some custom sizes in there since I need to switch between a laptop and PC for work. The laptop I have a 1536px viewport and the computer is a 1920px. I have added these in and given them custom stylings each but if I switch the over to each device, they are different... that shouldn't happene should it?

Hard to comment on what your problem might be without seeing your site, and looking at the code in a browser.

FYI - max-width on media queries was deprecated with Bootstrap 4.x, and Bootstrap Studio automatically adds it's media queries using min-width (since it's a mobile-first framework.) Boostrap 5x (coming soon) will also use min-width. Probably a good time to consider revisiting your system, just for the sake of compatibility with accepted industry standards.

@Printninja - hmmm interesting, I wasn’t aware of that. Thanks for the advice, I don’t design for mobiles first because a lot of the sites I built are for desktop as in the have tons of information on them and they look poor and they’re too long winded for mobiles so I rarely even bother unless it’s specifically requested. I’ll look up a refresher course online for bootstrap and see if that helps

Thanks Rob