Why Media Queries not working in Angular8

Question

I am running an angular app on CLI version 8. Everything was working fine last time I checked my code to github and build for production. But now when I try running it on localhost there seems to be a problem. The HTML files are not picking up the media queries from the CSS files. When I write my CSS out of the media queries everything works fine but inside media queries it doesn't work.

Also, when I try inspecting on chrome, the classes are attached on the HTML tags but CSS won't show. I don't know where I did a mistake. My guess is because of some build there caused an error or because of some npm package or may be some other reason.

These are the media queries I am using:

/* mobiles (landscape and portrait) */
@media only screen and (min-width: 320px) and (max-width: 500px) {}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 550px) and (max-width: 800px) {}


/* Desktops and laptops ----------- */
@media only screen and (min-width: 850px) and (max-width: 1024px) {}

/* bigger laptops */
@media only screen and (min-width: 1224px) { }

Please help me out of this situation. Thanks in advance.

Answer 1

Media queries should be be at the end of your css file because css is read from top to bottom. The rule that is set last, is the one that will be executed

/* bigger laptops */
@media only screen and (min-width: 1224px) { }
/* Desktops and laptops ----------- */
@media only screen and (min-width: 850px) and (max-width: 1024px) {}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 550px) and (max-width: 800px) {}
/* mobiles (landscape and portrait) */
@media only screen and (min-width: 320px) and (max-width: 500px) {}

Answer 2

Thanks for the help!

There seems to be some error in an npm package that I was using. Removed the package and everything is working fine as expected. The npm package that I was using was ngx-swiper-wrapper.