CODEWITHSUNDEEP
htmltwitter-bootstrapcssresponsive-designmedia-queries
Sahal Sajjad
Sahal Sajjad

Reputation: 235

CSS3 media queries not loading

I know this is a repeated question but my case is different. I am building a responsive website and wants to use different css rules for different devices using css3 media queries. So I have made three files style-lg.css, style-md.css, style-sm.css. And they are placed as <link rel="stylesheet" href="style-lg.css"> <link rel="stylesheet" href="style-md.css">
<link rel="stylesheet" href="style-sm.css">
The problem is all rules are being loaded from style-lg. This is what I have checked so far
<meta name="viewport" content="width=device-width"/>

Here are the media queries in the three files respectively: 

@media screen and min-width: 1200px{...}
@media screen and (min-width: 992px) and (max-width: 1199px){...}
@media screen and (min-width: 769px) and (max-width: 991px){...}

I have checked almost all the links in stackoverflow regarding this and can't find why the queries are not working in mine.

Eg: 

<span class="f-15 f-18 f-22">Text</span>

where f-15, f-18 and f-22 are fontsizes. But when I change the size of my browser window, bootstrap changes col-lg to col-md and on further reducing the window size, col-md to col-sm but my classes are still f-22.

Can anybody explain me what's wrong in my code ?
Thanks in advance.

Upvotes: 0

Views: 730

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25495

Without a link to your live page it's difficult to troubleshoot for sure, but here are a few suggestions you could try.

  • Validate your CSS to be sure there isn't a problem, especially with the formatting of your media queries: http://jigsaw.w3.org/css-validator/

  • Even though you've created 3 separate css files, they'll all be loaded (unless you use some JS or other slick technique), and since they all load the usual css waterfall and specificity rules will apply. So make sure the rules are loaded in the correct order

  • You mention that f22 class is still be applied to a font when you expect that media queries would specify something else. Use web inspector to examine the element and figure out why

  • from the media query break points that you've given, you haven't accounted for viewport width less than 769px. Either set those styles explicitly or make sure the Bootstrap defaults are what you want

Good luck!

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

In your <head></head> section add this <link rel="stylesheet" media="screen and (min-device-width: 800px)" href="yourfilehere.css" />

Upvotes: 1

Related Questions