Media Queries not working in mobile devices?

HTML & CSS
1

Hello everyone. I am having a problem with my portfolio website with the CSS. I have a simple media query for mobile but it does not seem to be working when I test it. It’s supposed to remove the floats and widths for mobile so that there is no grid, but mobile still shows the desktop version.

I ran the CSS through the W3C CSS3 validator and it checks out. What am I doing wrong?

Here is the site URL: http://www.digitalseth.com

And here is the CSS query:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.itemGroup li {
	margin: 0 auto 20px auto;
	float:none;
}
.itemGroup li.lastItem {
	margin-right:auto;
}
.logo, .mainnav, .category {
	width:auto;
}
.mainnav li:nth-of-type(2) a {
	margin-right:30px;
}
.mainnav a {
	margin-right: 30px;
}
.mainnav {
	width: 360px;
}
#globalnav {
	top: -25px;
	margin-bottom: 20px;
}
}
2

Hi,

I’m seeing a single column on my mac iphone emulator (which is 99% accurate) and the opera mobile emulator shows the same on android also.

My first guess was that you omitted the viewport meta tag as media queries won’t work for mobile unless you have the viewport meta tag in place. However you do seem to have the tag in place unless of course you have just added it and fixed the issue :slight_smile:

3

Hi Paul,
Thanks for your help. Yes, I did add the viewport metatag after posting, and that seemed to help with iPhone. I still noticed a problem with my Android. It looked like this:

So all I did was change this:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

}

to this:

@media screen and (max-width: 940px) {

}

And that seemed to work. Could it be that the width of my phone was the problem? I have an HTC EVO 4G LTE. Only think I could think of is that.

4

Hi,

I don’t ever use ‘device-width’ as its unreliable and what you really want is the layout width media query to determine the breakpoints for your design. Just ensure that your design scales from small to large on the desktop with media query ‘width’ breakpoints at places that the design needs it and you ultimately end up catering for all devices automatically.