Why Media Queries not working in Angular8

user_6629206 0
Viewed 4989

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.

angular8 angular media-queries css html
5 Answers

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) {}
user_75648460

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.

user_66292060

Try adding styles locally to the component. In my case, for example, global styles didn't seem to work, and adding them locally to the component itself worked.

Thanks!

user_142075320

Fixed by moving style.css declaration next bootstrap in angular.json, so that my custom styles will be override bootstrap styles.

       "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
user_105988340

Run the following command to install media-query in your project.

  1. bower install ng-media-query
  2. npm install ng-media-query
  3. Download ng-media-query.js or ng-media-query.min.js
user_115932920
Related