Media Queries work when I re size the window but don't work when on other devices

Question

Ive been looking all over and I cant find any solution to this. My media queries don't work on mobile devices but they work when I re size my screen.

YES I do have:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In the head of my document.

Here are what my media queries look like:

  @media only screen and (max-width: 1100px) {
    .r-menu {
      display:inline;
    }
    .m-menu {
      display:none;
    }
  }
  @media only screen and (max-width: 900px) {
    .res-full {
      width: 100%; 
    }
  }

Thanks.

Here is the whole code: http://scratchpad.io/marvelous-holiday-5460

score 0 · Answer 1 · answered Aug 24 '15 at 04:25

0

Replace only screen with all

@media all and (max-width: 1100px) {
  .r-menu {
    display:inline;
  }
  .m-menu {
    display:none;
  }
}
@media all and (max-width: 900px) {
  .res-full {
    width: 100%; 
  }
}

screen is used for computer screens whereas all is used for all media type devices

answered Aug 24 '15 at 04:25

JisuKim82

349
2
9

I tried that and it did not work. I have tried a lot this is really annoying, media queries usually work well for me. – tdfranklinaz Aug 24 '15 at 04:27
If you update your question with the html it might help us figure out the issue – JisuKim82 Aug 24 '15 at 04:36
It should be noted that not only desktops, but also newer mobile devices identify themselves as the `screen` type. More info here: http://stackoverflow.com/a/4189911/2234742 – Maximillian Laumeister Aug 24 '15 at 05:21

score 0 · Answer 2 · answered Aug 24 '15 at 04:26

0

Do you really need to use "only"? I found that the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Why don't you try removing it?

answered Aug 24 '15 at 04:26

Priscila Martínez

11
1

I tried using all instead of only screen and it still doesn't work as you can see from the post below. – tdfranklinaz Aug 24 '15 at 04:30

Sanjeev · Answer 3 · 2015-08-24T05:16:19.740

0

Found the mistake Use min-width not max-width

/*If screen is less than 900px don't show full menu*/
@media(max-width: 900px) {
    .r-menu {
      display:inline;
    }
    .m-menu {
      display:none;
    }
  }
  /*If screen is greater than 900px then show full menu*/
  @media(min-width: 901px) {
    .res-full {
      width: 100%; 
    }
  }

edited Aug 24 '15 at 05:16

answered Aug 24 '15 at 04:32

Sanjeev

4,255
3
28
37

This did not work either, im going to update my question with all the html – tdfranklinaz Aug 24 '15 at 04:40
You have to use min-width because after 900px you want your nav to appear in full form , you were just doing opposite – Sanjeev Aug 24 '15 at 05:13
min-width screws it up and doesnt work still. and the nav part of the media query does actually work on mobile, its the other parts that dont work – tdfranklinaz Aug 24 '15 at 05:16

score 0 · Answer 4 · answered Aug 24 '15 at 05:38

0

Use this css

@media screen and (max-width: 1100px) { .r-menu {
  display:inline;
}
.m-menu {
  display:none;
}}
 @media screen and (max-width: 900px) {
.res-full {
   width: 100%; 
 }}

working all devices & screens

answered Aug 24 '15 at 05:38

Lalji Tadhani

14,041
3
23
40

Media Queries work when I re size the window but don't work when on other devices

4 Answers4