CODEWITHSUNDEEP
htmlcssangularmedia-queriesangular8
neerav94
neerav94

Reputation: 449

Why Media Queries not working in Angular8

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.

Upvotes: 4

Views: 8140

Answers (5)

Ram
Ram

Reputation: 91

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"
        ],

Upvotes: 2

bruTeFoRcE
bruTeFoRcE

Reputation: 37

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!

Upvotes: 2

Sandun Susantha
Sandun Susantha

Reputation: 1140

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

Upvotes: -2

neerav94
neerav94

Reputation: 449

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.

Upvotes: 2

Tzimpo
Tzimpo

Reputation: 1009

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

Upvotes: 4

Related Questions