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
Rifqi Fahmi
23,164 PointsI found my header colour gone white right after I set the "#logo" code. How this can be happen
I found my header colour gone white right after I set the "#logo" code. How this can be happen
3 Answers
Jeff Lemay
14,268 PointsYou probably have a syntax error in your css somewhere that is causing those properties to no longer render. You might be missing:
- A closing bracket
- A comma to separate selectors
- A semi-colon or colon in one of your properties
If you post your code we can take a look and help you find the issue. Or this could be completely off and it's something else entirely that's causing your problems.
Jeff Lemay
14,268 PointsI added some comments to note a few issues:
/* FILE: my responsive css*/
@media screen and (min-width: 480px) {
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
#image li { float: left; margin: 2.5%; width: 28.33333%; }
#image li:nth-child(4n) { clear: left; }
/* NEED TO CLOSE MEDIA QUERY */
@media screen and (min-width: 660px) {
nav { float: right; text-align: right; margin-right: 5%; width: 45%; font-size: 1.125em; }
#logo { float: left; text-align: left; margin-left: 5%; width: 45%; }
}
/*FILE: my main.css*/
img { max-width: 100%; }
a { text-decoration: none; color: #0030ff; }
header { background: #f5517b; border-color: #fa0947; }
h1, h2 { color: #fff; text-align: center; }
h1 { padding: 15px 0 0; margin-top: 0px; line-height: 2em; font-family: 'Montserrat', sans-serif; }
h2 { margin-top: -5px; font-size: 0.9em; font-family: 'Montserrat', sans-serif; }
nav { margin: 15px 0; padding: 10px 0 20px; background: #f43869; text-align: center; }
nav li { padding: 0 40px 0 0; color: #7d3649; font-size: 1.4em; font-family: 'Arvo', sans-serif; }
nav li { display: inline-block; }
body { font-family: 'Arvo', sans-serif; }
/* you need to use period to target a class --- .wrapper */
wrapper {
max-width: 960px;
margin: 0 auto;
padding: 0 5%;
}
image li {
float: left;
width: 45%;
margin: 2.5%;
list-style: none;
background-color: #e1d4d4;
}
image p {
padding: 10px 20px;
}
footer { clear: both; margin: 5px auto; text-align: center; }
footer img { width: 25px; height: 25px; margin: 0 5px; }
nav a:hover { color: #99f0e9; } .selected { color: #99f0e9; }
nav a { color: #7d3649; }
/* there is no 'length' property, i think you want 'width' */
.profile-photo { border-radius: 100%; width: 200px; length: 200px; clear: both; display: block; margin: 10px auto; }
Jeff Lemay
14,268 PointsClose the first media query, correctly target elements with a class name (.wrapper and .image), and remove the 'length' property.
Rifqi Fahmi
23,164 Pointsbye the way how much width and length in pixels of the portfolio picture in the tutorial video?
Rifqi Fahmi
23,164 Pointsi have fix the problem. I forgot to set the background colour of the header #forgiveme hahaha
Rifqi Fahmi
23,164 PointsRifqi Fahmi
23,164 Pointshere maybe you can check this
my indext. html code
<!DOCTYPE html> <head> <meta charset="utf-8" > <title> Rifqi's Design </title> <link rel="stylesheet" href="css/normalize.css" > <link rel="stylesheet" href="css/main.css" > <link rel="stylesheet" href="css/responsive.css" > <link href='https://fonts.googleapis.com/css?family=Arvo:400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
</head> <body> <header> <a href="index.html" id="logo" > <h1>Rifqi Mulya F</h1> <h2>Design enterpreneur</h2> </a> <nav> <ul> <li><a class="selected" href="index.html">Gallery</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="image"> <li> <img src="img/number-14.jpg" > <p> Purity of design calm and flow. This effect created through photoshop CC. </p> </li> <li> <img src="img/numbers-13.jpg" > <p> Complexcity of design make eyes impressed </p> </li> <li> <img src="img/numbers-14.jpg" > <p> Line design abstract filled bye rainbow colour </p> </li> <li> <img src="img/numbers-15.jpg" > <p> Group of pencils photo taken in the right perspective </p> </li> <li> <img src="img/numbers-16.jpg" > <p> Colored design leaf poured with water </p> </li> </ul> </section> <footer> <a href="https://www.facebook.com/zcabez"> <img src="img/facebook-wrap.png" > </a> <a href=""> <img src="img/twitter-wrap.png" > </a> <p> © Rifqi Corp </p> </footer> </div>
</body>
my responsive css
@media screen and (min-width: 480px) { #primary { width: 50%; float: left; } #secondary { width: 40%; float: right; } #image li { float: left; margin: 2.5%; width: 28.33333%; } #image li:nth-child(4n) { clear: left; } @media screen and (min-width: 660px) { nav { float: right; text-align: right; margin-right: 5%; width: 45%; font-size: 1.125em; } #logo { float: left; text-align: left; margin-left: 5%; width: 45%; }
}
my main.css
img { max-width: 100%; } a { text-decoration: none; color: #0030ff; } header { background: #f5517b; border-color: #fa0947; } h1, h2 { color: #fff; text-align: center; } h1 { padding: 15px 0 0; margin-top: 0px; line-height: 2em; font-family: 'Montserrat', sans-serif; } h2 { margin-top: -5px; font-size: 0.9em; font-family: 'Montserrat', sans-serif; }
nav { margin: 15px 0; padding: 10px 0 20px; background: #f43869; text-align: center; } nav li { padding: 0 40px 0 0; color: #7d3649; font-size: 1.4em; font-family: 'Arvo', sans-serif; } nav li { display: inline-block; } body { font-family: 'Arvo', sans-serif; }
wrapper {
image li {
image p {
footer { clear: both; margin: 5px auto; text-align: center; } footer img { width: 25px; height: 25px; margin: 0 5px; } nav a:hover { color: #99f0e9; } .selected { color: #99f0e9; } nav a { color: #7d3649; } .profile-photo { border-radius: 100%; width: 200px; length: 200px; clear: both; display: block; margin: 10px auto; }