Reputation: 449
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
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
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
Reputation: 1140
Run the following command to install media-query in your project.
bower install ng-media-query
npm install ng-media-query
Download ng-media-query.js or ng-media-query.min.js
Upvotes: -2
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
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