CODEWITHSUNDEEP
androidcsshtmlmedia-queries
Curtis
Curtis

Reputation: 13

CSS Media Queries not Working for Android Device

After searching through related questions, I'm still unable to get media queries to work for my site (in progress):

http://codemusings.net/

I first ensured that my site validates as valid HTML5. I'm also using the <meta> tag with name="viewport":

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

Using help from related questions here, I went to http://mediaqueriestest.com/, which reports my Samsung Galaxy S4 as having a device-width of 640px.

I'm using a separate style sheet in which to overwrite style rules in the main style sheet.

<link rel='stylesheet' type='text/css' href='style/main.css'>
<link rel='stylesheet' type='text/css' href='style/mobile.css' media='only screen and (device-width: 640px)'>

Inside mobile.css:

nav {
  float: none;
  width: 50%;
}
main {
  float: none;
  width: 90%;
}
.section {
  background: none;
}

To ensure that the problem wasn't with clients fetching the style sheets in the wrong order, I tried appending a media query to my main CSS style sheet:

@media screen only and (device-width: 640px) {
  html { color: red; }
}

However, this didn't work either. I've been specifying device-width: 640px in an attempt to just ensure my mobile CSS works right, but my overall goal is to reliably load different CSS for all smart phones and tablets.

I should also note I'm using Chrome on my Galaxy S4.

Upvotes: 1

Views: 4818

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

try with i think this should work

@media only screen and (max-device-width: 640px) {
  html { color: red; }
}

Upvotes: 4

Related Questions