Problems with the media screen code for pages larger than 660px. Help!

Question

My navigation element is acting strange when I add the code for the media screen element min-width 660px. It's like it is not contained within the header and is pretty much taking a life of its own on screens larger than 660px. I have gone through my code a few times but I can't see anything wrong, altho I am a newbie, I can hardly be expected to be an expert troubleshooter...hence why I need help.

Answer 1 · 2014-11-10T05:55:03Z

November 10, 2014 5:55am

Hi Denis,

I believe the issue is related to the floated nav. Can you try adding the following to the media query please?

#rapper {clear: both;}

Has this made any difference? If not, can you try removing the float in the media query nav to see if this is where the issue is occurring please?

Thanks

-RIch

Answer 2 · 2014-11-10T05:43:28Z

November 10, 2014 5:43am

/INDEX.HTML/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Denis Githaka | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,800,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="veiwport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <header>

    <a href="index.html" id="logo">
    <h1>Denis Githaka</h1>
    <h2> Web Deisigner</h2>
    </a>
    <nav>
      <ul>
        <li><a href="index.html" class= "select">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

    <div id="rapper">
    <section>
      <ul id="gallery">
        <li>
          <a href="img/Travel-the-World.jpg">
          <img src="img/Travel-the-World.jpg" alt="">
          <p>Get infected with the Wanderlust!</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Get infected with the Wanderlust!</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Get infected with the Wanderlust!</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Get infected with the Wanderlust!</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Get infected with the Wanderlust!</p>
          </a>
        </li>

      </ul>
      </section>

  <footer>
    <a href="http://twitter.com/githaka_d"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="https://www.facebook.com/denis.githaka"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2014 Denis Githaka</p>    
  </footer>
    </div>
</body>
  </html>

/MAIN.css/

/*****************************************
GENERAL
*****************************************/
  #rapper
  {
    max-width:900px;
    margin: 0 auto;
    padding: 0 5%;
  }
  a {
    text-decoration:none; align-self:center;
    color: #599a68;   
    }
img{
max-width: 50%;
}


/*****************************************
NAVIGATION ELEMENTS
*****************************************/
nav ul{
  list-style: none;
  margin: 20px 40px;
  padding: 0;
  text-align:center;
}

nav li{
  display:inline-block;

}

nav a{
  font-weight:800;
  padding: 25px 10px;
  }



/*****************************************
PAGE PORTFOLIO
*****************************************/
#gallery{
  margin: 0;
  padding: 0;
  list-style: none;
  align-content:center;
}
#gallery li{
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
.social-icon{
  width: 25px;
  height: 25px;
  margin: 0 5px;
}


/*****************************************
PAGE: ABOUT
*****************************************/
.profile-photo{
  display:block;
  max-width:200px;
  margin: 10px auto 30px;
  border-radius:100%
}

h3{
  font-family: 'Raleway', sans-serif;
  margin:0 0 1em 0;
  font-size: 1em;
  text-align:center;
}
#about{
text-align:center;
}


/*****************************************
PAGE: ABOUT
*****************************************/
.contact-info{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1em;
}

.contact-info li.phone a{
background-image:url(../img/phone.png);
}

.contact-info li.mail a{
background-image:url(../img/mail.png);
}

.contact-info li.twitter a{
background-image:url(../img/twitter.png);
}

.contact-info a{
  display:block;
  min-height:20px;
  background-size: 22.5px 22.5px;
  background-repeat:no-repeat;
  padding: 0 0 0 30px;
  margin: 0 0 9px;
}

/*****************************************
HEADING
*****************************************/

#logo
{
  text-align: center;
  margin: 0 auto;
}
h1{
  font-family: 'Raleway', sans-serif;
  margin: 15px 0;
  font-size: 2em;
}
h2{
  font-family: 'Raleway', sans-serif;
  margin: -5px 0 0;
  font-size: 1em;
}
/*****************************************
MAIN
*****************************************/

/*body formatting*/
body{
  background-color: #fff;
  color: #999;
}

/*top of the page*/
 header{
background-color:#6ab47b;
  }
nav{
background-color:green;
}
footer{
  font-size: 0.8em;
  padding-top: 50px;
  text-align:center;
  clear: both;
  color: #ccc;
}

/* headers, though on is formatted in the HTML code*/
h1, h2{
color:#fff;
}

/*Navigation edit*/
nav a, nav a:visited{
color: #ff0;
}

nav a.selected, nav a:hover{
color: #326790;
}

/RESPONSIVE.css/

@media screen and (min-width: 480px){

/*****************************************
TWO COLUMN: Contact
*****************************************/
  #primary{
    width: 50%;
    float: left;
  }

  #secondary{
    width: 45%;
    float: right;
  }

  /*****************************************
  Three Column: Portfolio
  *****************************************/
  #gallery li{
    width: 28.3333%;
  }
  #gallery li:nth-child(4n){
    clear:left;
  }
   .profile-photo
  { 
    float:left;
    margin: 0 5% 80px 0;
  }
}
@media screen and (min-width: 660px){

  /*****************************************
  Header
  *****************************************/

   nav{
    background:green;
    float: right;
    font-size:1.125em;
    margin-right: 5%;
    text-align:right;
    width:45%;
  }

  #logo{
    background-color:currentColor;
    float:left;
    margin-left:5%;
    text-align:left;
    width:45%;
  }
 nav{  
  float:left;
  }
  h1{
    font-size: 2.5em;
  }
  h2{
    font-size:1.5em;
    margin-bottom:20px;
  }
  header{
    border-bottom:5px solid#599a68;
    margin-bottom:60px;
  }


}

Answer 3 · 2014-11-10T06:09:49Z

November 10, 2014 6:09am

Thank you so very much Rich. It looks normal now!

Now how do I get to float the nav elements to the right?

Answer 4 · 2014-11-10T06:16:23Z

November 10, 2014 6:16am

'Best Answer' is surely yours Rich!

I tried that(floating navigation list elements) and its was a downright mess yet again. Another suggestion?

Answer 5 · 2014-11-10T08:59:11Z

November 10, 2014 8:59am

Thanks again. I will take a look at that.

Welcome to the Treehouse Community

Looking to learn something new?

Denis Githaka

Denis Githaka

Problems with the media screen code for pages larger than 660px. Help!

Denis Githaka

Denis Githaka

Rich Bagley

Rich Bagley

Denis Githaka

Denis Githaka

5 Answers

Rich Bagley

Rich Bagley

Denis Githaka

Denis Githaka

Denis Githaka

Denis Githaka

Rich Bagley

Rich Bagley

Denis Githaka

Denis Githaka

Rich Bagley

Rich Bagley

Denis Githaka

Denis Githaka