How do I get firefox to work with media queries? - html

Question

I'm new to web design and trying to make my site laptop friendly. I decided to use media queries to pull up different stylesheets as the window sizes change. This works great with Chrome and IE but Firefox uses the stylesheet I've written for laptops regardless of whether I pull it up on my laptop or my 1080p monitor.
This is the media query I'm currently using.
<link rel="stylesheet" media="screen and (min-width:1200px) and (max-width:1600px)" href="styleslaptop.css" />
I've already checked all my extensions and none of them are making a difference.
Any help would be greatly appreciated.

Answer 1

Change your link to:
<link rel="stylesheet" href="styleslaptop.css"/>
Then open styleslaptop.css and at the bottom of the file add this:
CSS
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
I got the media queries from this article: Media Queries for Standard Devices
The best way to determine your breakpoints is by design not by device, but if your site is not that complex, cookie cutter should suffice.
UPDATE
Upon inspection of your 2 stylesheets I believe I know why the laptop CSS doesn't work in Firefox. At the end of both stylesheets you employ a rarely used at rule: #-moz-document url-prefix() {} This rule targets specific pages with the prefix(http://example.com/path/). An explanation of #document rule is here. There's two minor problems and one major problem with this:
The #document rule is only supported by Firefox.
If you really want to use this useless rule, then you should put a url in the parenthesis ex. #moz-document url-prefix(http://example.com/path)
So right now on the desktop CSS the properties and values that are in that rule set apply to all pages IF your'e using Firefox. Now on to the major problem.
On your laptop CSS you are missing the closing bracket of the #document rule set. This explains why you see a big difference in Firefox and why the media queries I gave you didn't work. To fix this simply go to the very bottom of your laptop CSS and place a }. You should now see Firefox the way you expected it to look, but keep in mind there are some extra rules in the dektop CSS:
#testimonialscontent h2 {
padding-top:0.25%;
padding-right:0;
font-size:1em;
}
body {
background-color:white;
}
FURTHER ADVICE
It's good that your'e taking the time to learn esoteric things, but be aware of how other developers do things as well. There's a slew of useless properties and rules that are too specific in purpose or to narrow in compatibility. Most but not all of them have vendor prefixes -moz, -webkit, etc. These are for the most part experimental, partially supported, and/or limited in some way, so remember Caveat emptor. So when you want to use something you don't see used very often or something with vendor prefixes, go to: http://caniuse.com/, a search will yield info such as which browsers support a property, element, etc.
On the stylesheets, one should try to use one stylesheet that has all of your custom styles. You should use your desktop CSS as the core rules, then place all of the new rules (not all of the rules) you have for the laptop and put them at the bottom of the core rules (desktop CSS), then put them inside the media query as I originally explained. The reason why you need to minimize the number of external files (not just .css but .js as well) is because they incur an extra HTTP requests, see this: Seven Mistakes that Make Websites Slow.
Good luck, sir. If I helped, don't forget to click that green checkmark and I if really helped helped you out, click that upvote arrow as well . ;)

Answer 2

Put your media queries inside your css file..
Link like this
<link rel="stylesheet" href="styleslaptop.css" />
And in your css wrap everything between
#media screen and (min-width:1200px) and (max-width:1600px) { /* your css here */ }