CODEWITHSUNDEEP
firefoxresponsive-designmedia-queries
tx291
tx291

Reputation: 1331

Firefox specific media queries

This is probably a VERY simple question, but I am having a hard time! I have an external CSS file that is working fine and is responsive. As to be expected, the positioning of a few elements is a little "off" when viewed in Firefox. I wanted to write a media query for when the page is viewed in Firefox, and adjust the margins, etc. of a specific element. I thought you could use the prefix:

@-moz-document url-prefix()

as a media query, but that didn't do anything.

How do you write a media query for when the page is viewed in Firefox and Safari?

Upvotes: 11

Views: 25017

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25495

You can use the selector you mentioned, e.g.:

@-moz-document url-prefix() {
  h1, p{
    color:pink;
  }
}

See this live: http://codepen.io/panchroma/pen/gpXdRj

More about Firefox vendor selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#font-family

More browser selectors and hacks: http://browserhacks.com

FWIW, have you double-checked that your FireFox layout issues aren't related to browser default settings and that they couldn't be solved by using a different CSS reset? I've had success in the past with normalize.css

Good luck!

Upvotes: 17

Patri Dev
Patri Dev

Reputation: 51

This query only affect to mozilla navigator:

@media all and (min--moz-device-pixel-ratio:0) and (max-width: 680px){...}

And this is only for IE: 

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) and (max-width: 680px){...}

More information here:

https://developer.mozilla.org/es/docs/CSS/Media_queries

Best wishes!!

Upvotes: 5

Related Questions