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
Stephanie Burrows
7,251 PointsMy header will not adjust as it should when adding in responsive css. Not sure where I went wrong with the code.
I just finished the video on how to adjust the header using responsive css. Something is not right with my code, but not sure where. When expanding the window the links become stacked at one breaking point. There is no bottom border applied either, and the links themselves move up in line with the logo even though they should be below it.
Kristopher Van Sant
Courses Plus Student 18,830 PointsLooks like you're you having trouble posting your code? Check out the markdown cheatsheet for help or if it's easier you can take a snapshot of your workspace and post the link here too.
Stephanie Burrows
7,251 PointsI was having trouble! So sorry, still very new and learning my way around treehouse. I am no longer at my computer but will post code later this afternoon ASAP. Thanks for the help so far!
Kristopher Van Sant
Courses Plus Student 18,830 PointsNo need to be sorry!! Totally understand :) And no problamo, lots of folks are here to help whenever ya need it!
Stephanie Burrows
7,251 Points@media screen and (min-width: 480px) {
/********************************************
TWO COLUMN LAYOUT
********************************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/********************************************
PAGE: PORTFOLIO
********************************************/
#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 #d51286;
margin-bottom: 60px;
}
}
Kristopher Van Sant
Courses Plus Student 18,830 PointsHmmmm that all looks right. Can you do a snapshot of you workspace and link it here? You do a snapshot by clicking on the camera icon that's in the top right corner of your workspace. I'd like to check your main.css and index.html as well
Stephanie Burrows
7,251 PointsI hope that is how I correctly do a snap shot? I was unsure earlier.
Stephanie Burrows
7,251 Pointshttp://i1279.photobucket.com/albums/y523/onstephealth/test1_zpsc3e2yjau.png
Also (I hope this link works) this is what happens when I try to scale down my page.
3 Answers
Seth Kroger
56,413 PointsThe course puts this a slight bit out of order but there's an extra meta tag that should to be in the HTML. At least some browsers require it for responsive CSS to work, instead of being optional. Put this under the meta charset tag and it should work fine.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Kristopher Van Sant
Courses Plus Student 18,830 PointsHi! She already has this in her index.html and still has the breakage in the nav links.
Kristopher Van Sant
Courses Plus Student 18,830 PointsAwesome! Those links totally helped. Thank you! The reason you can't see the border-bottom is because in your responsive.css you have the border color set to the same color as your header's background color.
What you have:
header {
border-bottom: 5px solid #d51286;
margin-bottom: 60px;
}
What to change it to:
header {
border-bottom: 5px solid #fb1ca0;
margin-bottom: 60px;
}
As for the breaking in the navigation links I'm looking for a solution now....but wanted to go ahead and share the fix for the bottom border
Stephanie Burrows
7,251 PointsThanks for the border fix, that helped!
Kristopher Van Sant
Courses Plus Student 18,830 PointsYay! Ok did a little digging and I'm not sure if this is the best way to go about this, however it did fix the breakage for me, so test it out and see if it works for you too. In your main.css I added white-space: nowrap to the navs' ul.
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
white-space: nowrap;
}
I found the solution here, on Stack Overflow http://stackoverflow.com/questions/11540268/prevent-wrapping-of-menu-items. And here is a link to the mozilla docs about it too https://developer.mozilla.org/en-US/docs/Web/CSS/white-space .
Let me know if that helps!
P.S. Those pics of the kids are so stinkin cute!
Stephanie Burrows
7,251 PointsOk, that worked and I think everything is fixed now! Thanks for your help!
Kristopher Van Sant
Courses Plus Student 18,830 PointsHooray! No problem at all! Keep up the awesome work and happy coding! :)
Kristopher Van Sant
Courses Plus Student 18,830 PointsKristopher Van Sant
Courses Plus Student 18,830 PointsCan you post your code please? This way we can see what's going on.