206august471blackerby060
New Member
I am trying to display a page with different styles based on PC or mobile.My html,\[code\]<link media="only screen and (max-device-width: 780px)" href="http://stackoverflow.com/questions/14070658/iPhone.css" type="text/css" rel="stylesheet" /><link href="http://stackoverflow.com/questions/14070658/pc.css" type="text/css" rel="stylesheet" /> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> </head> <body> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="http://stackoverflow.com/questions/14070658/index.html">Home page</a></li> <li><a href="http://stackoverflow.com/questions/14070658/musings.html">Musings</a></li> <li><a href="http://stackoverflow.com/questions/14070658/town.html">My town</a></li> <li><a href="http://stackoverflow.com/questions/14070658/links.html">Links</a></li> </ul> <!-- Main content --> <h1>My first styled page</h1> <p>Welcome to my styled page!</p> <p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere</p> <p>There should be more here, but I don't know what yet.</p> <!-- Sign and date the page, it's only polite! --> <address>Made 5 April 2004<br> by myself.</address> </body> </html>\[/code\]my pc.css,\[code\]body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d }ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black }ul.navbar a { text-decoration: none }a:link { color: blue }a:visited { color: purple }address { margin-top: 1em; padding-top: 1em; border-top: thin dotted }\[/code\]and iPhone.css,\[code\]body { color: #FFFFFF; background-color: #000000 }ul.navbar { display : none }\[/code\]I tested this with chrome through Inspect Element and selected IPhone4 option, the menu links were not displayed as expected but the color and background-color styles in iPhone.css was not taking effect. It is shown as line crossed.
Please help me find where it goes wrong or provide a standard way to do this.Thanks.