Mobile CSS works in browser but not on phone...

[DizzyDan]

So I am working on a flexible template and I have 3 break points. When I resize the browser all works well but when I view it on my phone it isn't using narrow.css, what am I doing wrong?

 

URL: test.setthathook.com

 

- General style sheet

- min width 901px wide (regular browser)

- min width 701px medium (smaller screens/tablet)

- max width 700px narrow (tablet/phone/smaller devices)

<link rel="stylesheet" type="text/css" media="all" href="/wp-content/themes/test-set/style.css" />	<link rel='stylesheet' media='screen and (max-width: 700px)' href='/wp-content/themes/test-set/narrow.css' />	<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='/wp-content/themes/test-set/medium.css' />	<link rel='stylesheet' media='screen and (min-width: 901px)' href='/wp-content/themes/test-set/wide.css' />

Edited March 5, 2014 by DizzyDan

[moonstarsun]

700px are around tablet device sizes. Most phones in my experience do well at 480px

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

[DizzyDan]

Yes but at 700px shouldn't my narrow style still show for that width?

 

My phone is showing the regular css not the narrow css

[moonstarsun]

The max-width specified is a conditional marker as opposed to a property. Think of it like an if statement in javascript. The if doesn't change anything just alerts the browser of what action needs to be taken.

 

(parameter){element: propertyValue}

 

So what this is saying is if the max-device-width: is 700px execute what's in my curly braces (narrow.css). Since most cellular devices max out around 480 the stylesheet say's "This doesn't apply to me so let me execute everything else and ignore the code inside this condition"

[DizzyDan]

Well that makes MUCH more sense to me now, thank you for taking an extra step to explain it!

 

So I added this little fella:

<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='/wp-content/themes/test-set/narrow.css' />

And it works! Woohoo!

 

My only confusion now is the difference between

 

'only screen' vs 'screen'

 

and

 

'max-width' vs 'max-device-width'

 

Which brings up a question of should I re-label all of these to say 'max-device-width'?

 

Thank you VERY much for your help.

Edited March 5, 2014 by DizzyDan

[DizzyDan]

Ok so I decided to move these to my main style sheet instead of using separate style sheets, I find this much easier to work with.

 

Anyway so far all has been working well but I hit a snag now. On my phone I generally use Chrome as my browser and it pulls the correct style sheet but when I use the original browser it doesn't.

 

Is there a tool out there where I can see how my site would look on different phone browsers? Is there a such thing like firebug for phone browsers? or maybe you can guide me to what I'm doing wrong!

 

I placed these at the bottom of the style sheet.

/********** Phones **********/@media only screen and (max-device-width: 480px) {		#test-size{	display: none;	}		p{	font-size: 2em;	}		img{	width: 100%	}		#main-nav,	#footer-nav,	#main-full{	margin: 0;	}		#menu-main li a{	width: 33.333%;	}		#home, 	#home-grid .column, 	#home-featured{	width: 100%;	}		#home{	background: purple;	}	#home-grid .column{	background: #111;	}	#home-featured{	background: #777;	}}

[newseed]

The method I used is min-width throughout for all devices. So basically build and css the site to fit mobile devices such as Iphone and Samsung Galaxy 3/4. Once the layout looks good then I would css it for the next size which in some cases would be min-width: 480px, and the next size - min-width: 640px, next size - min-width:768px and so forth.It's much easier to start small and work your way up to larger screen sizes and I found that I use less css to get the same results.