CODEWITHSUNDEEP
cssmobilegoogle-chrome-devtools
itsraja
itsraja

Reputation: 1736

Different css for mobile - chrome testing - some css not working

I am trying to display a page with different styles based on PC or mobile.

My html,

<link media="only screen and (max-device-width: 780px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<link href="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="index.html">Home page</a></li>
    <li><a href="musings.html">Musings</a></li>
    <li><a href="town.html">My town</a></li>
    <li><a href="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>

my pc.css,

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 }

and iPhone.css,

body {
  color: #FFFFFF;
  background-color: #000000 }
ul.navbar {
    display : none }

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.

MobileCssResult

Please help me find where it goes wrong or provide a standard way to do this.

Thanks.

Upvotes: 0

Views: 2574

Answers (1)

Alexander Pavlov
Alexander Pavlov

Reputation: 32296

Swap the two <link> elements. The generic stylesheets should go first, since their rules will get overridden by rules from more specific (device-specific) stylesheets that follow (if any).

You should also place the <link> tags inside the <head> tag - otherwise your HTML is heavily malformed. There's a lot of code in WebKit that tries to handle this as gracefully as possible, though...

Upvotes: 1

Related Questions