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.

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top