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
Vanessa Castro
14,773 PointsSecond media query
I'm having a problem with my code after I added the attribute float: right; to my second query, the nav on my website does not look like the way it should look. The background changes to white, so the elements portfolio, about, and contact are not visible since the font-color is white as well. I do not understand why that is happening. This is the code for my second media query.
@media screen and (min-width: 660px){
/***************************************
HEADER
****************************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
}
Vanessa Castro
14,773 PointsHi Julie, this is all my code for my responsive.css file. I clear my float, but after I did that the elements portfolio, about, and contact stay on the center of the screen and not on the left side of the screen where they suppose to be.
@media screen and (min-width: 480px){
/*************************************** TWO COLUMN LAYOUT ****************************************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/*************************************** PAGE: PORFOLIO ****************************************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
/*************************************** PAGE: ABOUT ****************************************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px){
/*************************************** HEADER ****************************************/
nav {
background: none;
/float: right; */ / if I do not include this line in my code my web site looks fine but the nav elements stay in the
center*/
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }
h1 { font-size: 2.5em; }
h2 { font-size: 0.825em; margin-bottom: 20px; }
header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }
}
Julie Myers
7,627 PointsHi Vanessa,
Could you post your HTML as well? Seeing the HTML structure, such as which elements are parent and/or children of other elements, has a big impact on layout.
Also, have you heard of the clearfix solution? It's a better way of clearing your floats then using the float property by itself.
Julie
3 Answers
Julie Myers
7,627 PointsIn your CSS file, under heading, you have the following misspelled:
header{ float: letf;
//Should be:
header {float: left;
Your comment in the following has the wrong syntax:
nav li{ display: inline-block; /max-width: 45%; padding: 0 1.5%;/ }
//Should be:
nav li{ display: inline-block; /*max-width: 45%; padding: 0 1.5%;*/ }
Vanessa Castro
14,773 PointsThank you Julie!! I didn't see that misspelled. Everything is working good now. =)
Julie Myers
7,627 PointsYou're welcome :)
Steven Parker
229,732 PointsYou seem to have an improperly formatted comment. Instead of this:
nav { background: none; /float: right; */ / if I do not include this line in my code my web site looks fine but the nav elements stay in the
center*/ font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
I think you want this:
nav { background: none; /*float: right;*/ /* if I do not include this line in my code my web site looks fine but the nav elements stay in the
center*/ font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
But besides that comment, and other than formatting, your CSS file seems straight from the project downloads. Everything looks fine when using this (after correction) with the other project files.
I'm guessing you've accidentally introduced an issue in one of the other files. If you still need help, try making a snapshot of your workspace and posting the link to it here.
Incidentally, there's a minor bug in the video and project files. Where it says:
gallery li:nth-child(4n) {
...it should say:
#gallery li:nth-child(3n+1) {.
Vanessa Castro
14,773 PointsThanks Steven! I made that change but nothing changed.
Vanessa Castro
14,773 PointsI'm still having the same issue with the second media query. The header disappear, and the background of nav turns to white. Thank you for your help. These are my html and css files:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vanessa Castro | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Vanessa Castro</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>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending nodes in Photoshop</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80s style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using rpetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/_V_a_N_3_"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/vane.castro.0211"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Vanessa Castro.</p>
</footer>
</div>
</body>
</html>
About.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vanessa Castro | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Vanessa Castro</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/vane.jpg" alt="Photograph of Vane Castro" class="profile-photo">
<h3>About</h3>
<p>Hi, I'm Vane Castro! This is my desing portfolio where I share all of my favorite work. When I'm not desining things, I enjoy exercising, watching movies, hiking, shopping, reading, cooking, eating good food, and spending some good time with my bf and family.</p>
<p>If you'd like to follow me on Twitter, my username is <a href= "http://twitter.com/_V_a_N_3_"> @V_a_N_3 </a></p>
</section>
<footer>
<a href="http://twitter.com/_V_a_N_3_"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/vane.castro.0211"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Vanessa Castro.</p>
</footer>
</div>
</body>
</html>
Contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vanessa Castro | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Vanessa Castro</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>I'm not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p>
<p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:360-936-0085">360-936-0085</a></li>
<li class="mail"><a href="mailto:vanessacastrol16@gmail.com">vanessacastrol16@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=_V_a_N_3_">@V_a_N_3</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com/_V_a_N_3_"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/vane.castro.0211"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Vanessa Castro.</p>
</footer>
</div>
</body>
</html>
main.css
/*************************************** GENERAL ****************************************/
body{ font-family:'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/*************************************** HEADING ****************************************/
header{ float: letf; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1{ font-family: 'Changa One', sans-serif; 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 ****************************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 0px; padding: 0; }
nav li{ display: inline-block; /max-width: 45%; padding: 0 1.5%;/ }
nav a { font-weight: 800; padding: 15px 10px; }
/*************************************** 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; }
/*************************************** 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 a p {
margin: 0; padding: 5%; font-size: 0.753em; color: #bdc3c7; }
/*************************************** PAGE: ABOUT ****************************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/*************************************** 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'); }
/*************************************** COLORS ****************************************/
/* site body */ body{ background-color: #fff; color: #999; }
/* green header */ header{ background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ nav{ background: #599a68; }
/* logo text */ h1, h2{ color: #fff; }
/* links */ a{ color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
responsive.css
@media screen and (min-width: 480px){
/*************************************** TWO COLUMN LAYOUT ****************************************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/*************************************** PAGE: PORFOLIO ****************************************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
/*************************************** PAGE: ABOUT ****************************************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px){
/*************************************** HEADER ****************************************/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }
h1 { font-size: 2.5em; }
h2 { font-size: 0.825em; margin-bottom: 20px; }
header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }
}
Julie Myers
7,627 PointsJulie Myers
7,627 PointsWithout seeing the rest of your coding, my first guess is you need to clear the float. It would help if you posted all of your coding.