Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Denis Githaka
1,010 PointsProblems with the media screen code for pages larger than 660px. Help!
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.
Rich Bagley
25,869 PointsHi Denis,
Can you post the HTML and CSS linking to the problem please?
Thanks
-Rich
Denis Githaka
1,010 PointsThat's it...
5 Answers
Rich Bagley
25,869 PointsHi 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
Denis Githaka
1,010 Points/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>© 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;
}
}
Denis Githaka
1,010 PointsThank you so very much Rich. It looks normal now!
Now how do I get to float the nav elements to the right?
Rich Bagley
25,869 PointsNo problem! If it has helped please marked it as the accepted answer :)
Re the floated nav elements you would need to add a float: right to the nav li styles.
Thanks
-Rich
Denis Githaka
1,010 Points'Best Answer' is surely yours Rich!
I tried that(floating navigation list elements) and its was a downright mess yet again. Another suggestion?
Rich Bagley
25,869 PointsHi Denis,
Thanks, I think you may need to mark it as the accepted answer in the post by clicking the option.
After you float the nav elements don't forget to clear them afterwards. I find this a useful source for explaining it:
http://css-tricks.com/all-about-floats/ (Techniques for Clearing Floats section)
Hope that helps
-Rich
Denis Githaka
1,010 PointsThanks again. I will take a look at that.
Denis Githaka
1,010 PointsDenis Githaka
1,010 Pointsn