Jump to content

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


Recommended Posts

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 by DizzyDan
Link to comment
Share on other sites

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"

Link to comment
Share on other sites

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'




'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 by DizzyDan
Link to comment
Share on other sites

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;	}}
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...