Mible CSS not applying for navigation

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

  •  17-07-2023
  •  | 
  •  

Question

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.

Était-ce utile?

La solution

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top