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 trialJacob Finch
503 Pointsadjusting my nav under @media (min-width: 660px) is making my desktop site go crazy
Instead of eliminating the dark green background and going to the green header, my nav background is replaced with white and my text goes white.
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
That code is surely fine so this problem has to be back in my main. If anyone could help that'd be great. I'm currently trying to debug through css lint but not finding the problem.
tuukka uosukainen
22,107 PointsCould you please post all of your source code and a link to the code challenge?
Jacob Finch
503 Pointstuukka, this happened while following along in a video not a code challenge. What is the cleanest way to post all my code in this forum?
Jacob Finch
503 Points/**General **/
body {
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
img {
max-width:100%;
}
/*HEADING*/
header {
float: center;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family:'Changa One', sans-seriff;
margin: 15px 0;
font-size: 1.75em;
font-weight: Normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/*Navigation*/
/*Navigation*/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav {
background:#599a68;
}
nav a, nav a:visited {
color: #fff;
}
nav a.selected, nav a:hover {
color: #32673f
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*Footer*/
/*Footer*/
footer {
font-size:: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*HEADING*/
/*HEADING*/
a {
color: #6ab47b;
}
header {
background: #6ab47b;
border-color: #599a68;
}
h1 , h2 {
color: #fff;
}
/*Page Portfolio*/
/*Page Portfolio*/
/*Page Portfolio*/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7
}
#gallery li p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
body {
background-color: #fff;
color: #999;
}
/*PAGE:ABOUT*/
/*PAGE:ABOUT*/
/*PAGE:ABOUT*/
.profile-photo {
float: center;
display: block;
max-width: 150px;
margin:auto 30px;
border-radius: 100%;
}
/*PAGE: CONTACT*/
/*PAGE: CONTACT*/
/*PAGE: CONTACT*/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size:0.9em;
}
.contact-info a{
display:block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.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');
}
'''''
Jacob Finch
503 Points,,,html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Finch</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id= logo>
<h1>Jacob Finch</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class:"selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<img src="img/numbers-01.jpg" alt="">
<p> Jawn Jawn The Jawn is Jawn</p>
</li>
<li>
<img src="img/numbers-02.jpg" alt="">
</li>
<li>
<img src="img/numbers-06.jpg" alt="">
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/wahoolagon"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a>
<a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="facebook Logo"class="social-icon"></a>
<p>Β© 2014 Jacob Finch.</p>
</footer>
</div>
</body>
</html>
'''
5 Answers
tuukka uosukainen
22,107 PointsCheck out the Markdown Cheatsheet at the bottom of this page. I can't link it here. wrap your code inside three of these ```
Hope this helps!
Jacob Finch
503 PointsShould be up now. Thanks again for taking a look
tuukka uosukainen
22,107 PointsIs your problem about @media query?
I don't see it in your code. Sorry for not getting your problem.
tuukka uosukainen
22,107 PointsI tried your code in codepen and nothing strange seems to be going on. Nav bar stays dark green under the 660px. Weird. Sorry for not being able to help you :(
Jacob Finch
503 Points,,,
@media screen and (min-width: 480px) {
/2 Column Layout/ /2 Column Layout/ /2 Column Layout/
#primary { width: 50%; float: left;
} #secondary { width: 40%; float: right; }
/2 PORTFOIO/ /2 PORTFOILIO/ /2 PORTFOLIO/
#gallery li { width:28.33333%; }
#gallery li:nth-child(4n) { clear:left; }
/*2 PORTFOIO*/
/2 ABOUT/ /2 ABOUT/
.profile-photo { float: left; margin: 0 5% 80px 0 }
} @media screen and (min-width: 660px) {
/2 ABOUT/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
}
,,,
That's my media query. It's ok!
chunlingzhou
596 PointsHi Jacob, I got the same problem as you did a little while ago. But then I re-checked my .html file, for the header part, I saw I commented out a line: 'float: left;' the reason I commented it out was probably bc I played around it when I was watching that part of video, by commenting out the line, I didn't see different result at all AT THAT MOMENT.
Just a few minutes ago, I tried to put back that line, so the code in .html file is like this:
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%; /* w/o this, w float left, it would not occupy the entire page width */
}
And it fixed the problem(the same that you are mentioning in this discussion) I had before. Hope this helps.
chunlingzhou
596 Pointsshould be main.css file, not the .html file. sorry for wrongly mentioned the file involved.
Jacob Finch
503 PointsThanks so much guys
Jacob Finch
503 PointsJacob Finch
503 Points/HEADING/
header { float: center; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family:'Changa One', sans-seriff; margin: 15px 0; font-size: 1.75em; font-weight: Normal; line-height: 0.8em;
}
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/Navigation/ /Navigation/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav { background:#599a68; }
nav a, nav a:visited { color: #fff; }
nav a.selected, nav a:hover { color: #32673f }
nav ul { list-style: none; margin: 0 10px; padding: 0;
}
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
That's my header ad nav css