Mible CSS not applying for navigation

StackOverflow https://stackoverflow.com/questions/23519171

  •  17-07-2023
  •  | 
  •  

Frage

I'm simply trying to modify the navigation bar of my site for smaller devices. The site should be remaining with a fixed design for iPads+ resolutions, and then become responsive for smaller resolutions. While the mobile-size specific codes are applying to some classes (container, main, etc.), they don't seem to apply to the navigation div. You can see how it's currently functioning here: http://moore.whiterabbitstudio.us/

Here is a fiddle for permanence: http://jsfiddle.net/ursalarose/xAp72/ HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<body>
<div class="container">
  <div class="main-hold">
    <div class="main">
      <div id="nav">
        <ul>
            <li><a href="index.html" class="current">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="process.html">Process</a></li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>

CSS:

body
{
    display: table;
    margin: 0 auto;
    letter-spacing: .1em;
    text-align: center;
    font-size: 16px;
}

*
{
  margin:0;padding:0;  
}

html,body
{
    height:100%;   
}

.container {
    height: 100%;
    display: table-cell;   
    vertical-align: middle;  
}

.main-hold {
    height:600px;
    width:1000px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.main {
    height:540px;
    width:900px;
    background-position: left top;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

/* MOBILE DEVICES */
@media screen and (max-width: 950px){

.main-hold {
    width:500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin-top: 0px auto;
}
.main {
    width:100%;
    background-repeat:no-repeat;
    background-position:center top;
    margin-top: 0px auto;
}
#nav {
    margin: 20px auto 0 auto;
    float:none;
    width: 100%;
}
#nav ul {
    list-style:none;
    }
#nav li {
    width: 100%;
    }
#nav li a {
    font-size: 14px;
    text-decoration:none;
    color:#888;
    display: block;
    text-align:center;
    width: 100%;
    height: 22px;
    display: inline;
    background-color:#CCC;
    background-image: none;
    padding-right: 0px;
    padding-top: 6px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}
#nav li a:hover, #nav li a.current {
    background-color:#FFF;
}

}


/* NAVIGATION */
#nav {
    float: left;
    height: 250px;
    width: 168px;
    margin-top: 60px;
}
#nav ul {
    list-style:none;
    }
#nav li {
    width: 168px;
    height: 28px;
    display: block;
    margin-bottom: 8px;
    }
#nav li a {
    font-size: 14px;
    text-decoration:none;
    color:#888;
    display: block;
    text-align: right;
    width: 148px;
    height: 22px;
    display: block;
    padding-right: 20px;
    padding-top: 6px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}
#nav li a:hover, #nav li a.current {
    background-color:#fff;
}

Thank you for any help! I've never tried designing for mobile devices before.

War es hilfreich?

Lösung

Try placing the mobile CSS below the desktop CSS, as the desktop CSS is now overwriting the mobile css.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top