2

Ok I have two CSS files for my HTML page and Chrome uses both 1 for 800px or less the other for 801px or more but Firefox and i.e. don't use the smaller one, they just display the larger one regardless of screen size.

<html>
<head>
<link href="big.css" text="text/css" media="screen and (min-device-width:801px)" rel="stylesheet" />
<link href="small.css" text="text/css" media="screen and (max-device-width:800px)" rel="stylesheet" />     
</head>
</html>

h1 {
   margin: 5%;
   text-align: center;
}
h2 {
   margin: 5%;
   text-align: center;
}

The CSS is for the small but it displays differently. Very new to this, help..

Abhishek T.
  • 1,133
  • 1
  • 17
  • 33
Push 1
  • 49
  • 8
  • 1
    If you're testing on a desktop browser, don't use the min/max-device-width query. See if it works with `min-width` and `max-width`. – Michael Benjamin Aug 04 '16 at 01:37
  • Thank you. What would i put as the max width on the big file? – Push 1 Aug 04 '16 at 01:40
  • its as if firefox is completly disregarding the second file – Push 1 Aug 04 '16 at 01:59
  • Use the same values. Just instead of `max-device-width`, use `max-width`. Same switch for `min`. More details [**here**](http://stackoverflow.com/q/6747242/3597276) and [**here**](http://stackoverflow.com/q/18500836/3597276). – Michael Benjamin Aug 04 '16 at 02:18
  • I have made the change but now the small file when edited/changed show no change – Push 1 Aug 04 '16 at 02:35
  • How to change font size and other things for just opera/mozilla.? in this css file with out effecting chromes stuff? – Push 1 Aug 04 '16 at 02:49

1 Answers1

1

Like @Michael_B said: min-width and max-width, not min/max-device-width. You're not querying the width of the device; you're interested in the width of the viewport.

Using the same values (800px and 801px respectively) should work.

Josh
  • 254
  • 3
  • 5