oyb Posted November 13, 2012 Share Posted November 13, 2012 Hi, I'm trying to get my webpage to use another CSS when you try to browse it with a mobile device. My problem is that none of the guides I can find really help me out. I've tried multiple, some easier than others. For example these two: http://www.seabreezecomputers.com/tips/mobile-css.htm and http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/ The problem is, that even though I do(at least I think I've done) what they tell me, my mobile device still reads from the original css. I thought that the problem was gonna be to get the mobile css to look good, but can't even get it to link.. Dreamweaver says both css's(5 in the other example) are linked to the html file, but mobile device refuses to read from the "media="handheld" " or "media= only screen(max-device-width:480px;)" Possible to get some help? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 13, 2012 Share Posted November 13, 2012 Place this page, and css files styles.css, and mobile.css in same location, when seen normally through web browser the background colour should be blue, but in mobile device it will have redish background colour. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link media="Screen" href="styles.css" type="text/css" rel="stylesheet" /><link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" /></head><body><h1>Hello World</h1></body></html> mobile.css /* CSS Document */body {background-color:#990000; color: #fff;} styles.css /* CSS Document */body {background-color:#0000FF; color: #fff;} Link to comment Share on other sites More sharing options...
oyb Posted November 14, 2012 Author Share Posted November 14, 2012 Thanks, that sort of works. The problem is that it loads the original css and the mobile css. For example I've got background-image in my styles.css, so when I use a mobile device I still get the background image from styles.css along with the red background. is there a way to overwrite or remove the styles.css preferences when you get on mobile? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 14, 2012 Share Posted November 14, 2012 reset background from moblie css body {background: none;} Link to comment Share on other sites More sharing options...
oyb Posted November 14, 2012 Author Share Posted November 14, 2012 Excellent! thank you! Link to comment Share on other sites More sharing options...
DarkxPunk Posted November 14, 2012 Share Posted November 14, 2012 One thing I would recommend is having the CSS file placed in the document using PHP. Just a idea. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now