All geek questions in one place

Bootstrap ignores certain media queries

I currently have the following scss file with contents:

/* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { // Something here } /* Desktop */ @media (min-width: 981px) and (max-width: 1198px) { // Something here } /* Large Desktop */ @media (min-width: 1200px) { // Something here }

If I load the application.css file in Rails, I get the following:

 /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { /* Remove gap between nav and content*/ /* line 120, ../../app/assets/stylesheets/static_pages.css.scss */ .navbar-fixed-top { margin-bottom: 0 !important; } /* Remove any padding from the body */ /* line 125, ../../app/assets/stylesheets/static_pages.css.scss */ body { padding-top: 0 !important; } /* line 133, ../../app/assets/stylesheets/static_pages.css.scss */ .static_pages-controller-home .landing .sign-up { display: none; } /* line 142, ../../app/assets/stylesheets/static_pages.css.scss */ .static_pages-controller-home .container #students #bulletpoints h2, .static_pages-controller-home .container #students #bulletpoints p { text-align: left !important; } } /* Desktop */ /* Large Desktop */ @media (min-width: 1200px) { /* Remove gap between nav and content*/ /* line 168, ../../app/assets/stylesheets/static_pages.css.scss */ .navbar-fixed-top { margin-bottom: 0 !important; } /* Bypass left & right padding */ /* line 186, ../../app/assets/stylesheets/static_pages.css.scss */ .static_pages-controller-home .container #students #bulletpoints h2 { text-align: left !important; } }

Please note that in the compiled file we have the comment /* Desktop */ , but CSS does not exist inside the media query, infact it seems that the compilation ignores the entire media query. Is there any way around this?

My goal is to have some css specific to this width range.

0
source share
2 answers

Without seeing my actual code, I think you have a grammatical error in the uncompiled file. There is no reason why you cannot have some kind of css for the desktop range.

You can try this.

Make a backup of your unrelated file, then run a new one that only has:

 /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { // Something here font-color{ color:red; } } /* Desktop */ @media (min-width: 981px) and (max-width: 1198px) { // Something here font-color{ color:green; } } /* Large Desktop */ @media (min-width: 1200px) { // Something here font-color{ color:blue; } }

Compile it and surprise, surprise the font color will change in different points of view.

After you do this, add the other @media content back to the piece in parts so that you can determine the cause.

Good luck.

+1
source

Old post, but maybe I can help someone.

I fix this problem by adding this HTML inside <head>...</head>

 <head> ... <meta name="viewport" content="width=device-width,initial-scale=1"> ... </head>
0
source

Source: https://habr.com/ru/post/948184/

More articles:


All Articles