0

I'm using three separate style sheets with different media queries to load my site suitably at various screen sizes, however I can't seem to get the mobile style sheet (max-width: 480px) to load at all. Instead it loads the (max-width: 1000px) style sheet.

Here's how they are presented in the html

    <link rel="stylesheet" type="text/css" href="/CSS/page_style.css" media="screen">
    <link rel='stylesheet' type="text/css" href='/CSS/page_narrow.css' media='screen and (max-width: 1000px) and (min-width: 481px)'>
    <link rel='stylesheet' type="text/css" href='/CSS/page_thin.css' media='screen and (max-width: 480px)'>

EDIT - I have just tried with the viewport meta tags and works. Thanks guys I'd been stuck on that for a few days now!

Ed Lewis
  • 33
  • 10
  • 1
    How are you testing your work? Are you using something like Chrome's device emulator? – Brayniverse Jun 09 '16 at 14:57
  • You are using absolute paths, are you sure that "/CSS/page_style.css" is loaded correctly ? – Marcandria Jun 09 '16 at 14:58
  • 2
    Are you adding the [viewport meta tag](http://stackoverflow.com/questions/14775195/is-the-viewport-meta-tag-really-necessary) to your document? – Turnip Jun 09 '16 at 14:59
  • I agree with @Turnip, without viewport meta tag many mobile browsers simulate 980px-wide screen – pzmarzly Jun 09 '16 at 15:01
  • I have tested the code myself; both with the viewport meta tag and without the tag. I can confirm that the stylesheet only loads for me when using the viewport meta tag. – Brayniverse Jun 09 '16 at 15:06

1 Answers1

0

Writing because nobody took his time to post an answer.

The problem is unless viewport meta tag is added, mobile browsers simulate usually 980px wide displays, so they will load your stylesheet designed for 481-1000px.

Setting up width=device-width will make them use real device's screen width.

Complete code - add to <head> following line:

<meta name="viewport" content="width=device-width, initial-scale=1">
Community
  • 1
  • 1
pzmarzly
  • 778
  • 15
  • 29