Screen and Mobile Stylesheets

up vote12down votefavorite 6

I've looked through the stack overflow topics on this question, as well as some google search results but I can't seem to solve my issue. I've created a stylesheet for mobile devices(mobile.css) which is essentially a copy of my main.css with changes to many of the attributes. When I load only mobile.css as the stylesheet it looks great on my iPhone, just how I want it to. However when I put both in, I am getting a mix of both, but more of the main.css Any idea why? rel="stylesheet" href="styles/main.css" type="text/css" media="screen" /> rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' /> name="viewport" content="width=device-width, initial-scale=1.0" />

css mobile screen stylesheet

share|improve this question

edited Sep 20 '11 at 4:14 Blender 104k971143

asked Sep 20 '11 at 3:39 xIlluzionx 66116

	How do you "put both in"? –  Blender Sep 20 '11 at 3:47
	My code isn't showing up for some reason when I posted it... Could you look at the source at: www.cuhvz.com/sandbox/home.php –  xIlluzionx Sep 20 '11 at 4:13
	Fixed it. It should work now. –  Blender Sep 20 '11 at 4:14

add comment

4 Answers

activeoldestvotes

up vote20down voteaccepted

According to documents, syntax of loading another file in specific device/condition is like this: name="viewport" content="width=device-width, initial-scale=1"> rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" /> rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" /> This will only one css file for every single amount of width For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640 pixels that many developers don't count this width as a mobile browser width. If you add this below meta tag in your document problem will be solved name="viewport" content="width=320"> This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here. share|improve this answer edited Jul 1 '13 at 17:11 ripper234 33k77289528 answered Sep 20 '11 at 4:00 Mohsen 13.8k74068

Sorry, none of the markup got posted for some reason, perhaps I forgot to format it as code. (www.cuhvz.com/sandbox/home.php) –  xIlluzionx Sep 20 '11 at 4:11 You need to add media="screen and (min-width: 480px)" to your main.css –  Mohsen Sep 20 '11 at 4:17  1   Doing the first thing you said worked! –  xIlluzionx Sep 20 '11 at 4:31 Added  - people coming to this answer from Google and copy-pasting blindly - without this line the code doesn't work well. – ripper234 Jul 1 '13 at 17:11 add comment

Did you find this question interesting? Try our newsletter

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

 

up vote2down vote

Its hard to know without any markup but i'm guessing you should do something like: http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries rel="stylesheet" href="base.css" /> // has all the common classes rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 320px)" /> rel="stylesheet" href="largescreen.css" media="screen and (min-device-width: 321px)" /> share|improve this answer answered Sep 20 '11 at 3:59 James Khoury 4,32521040

Sorry, none of the markup got posted for some reason, perhaps I forgot to format it as code. (www.cuhvz.com/sandbox/home.php) –  xIlluzionx Sep 20 '11 at 4:10