Menu
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?
650
To show current media queries open settings (F1 from dev tools) and check "Show Browser Styles" under the Inspector section. The media query will be shown just to the right of the file name and line number. Save this answer.
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.
Activate Media Query Toolgo into responsive design mode. click the three dots menu in the top right of the screen. click "show media queries"
So there you have it, media-queries does not affect specificity. A media-query only decides whether the code inside it should be enabled or not.
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!
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
