Jump to content
Sign in to follow this  
DizzyDan

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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"

Share this post


Link to post
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'

 

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 by DizzyDan

Share this post


Link to post
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;	}}

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...