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
Angela Fonteboa
2,267 PointsImplementing Media Queries - Lose her when she paste all the code for the Navigation
lose her around 5:13 http://teamtreehouse.com/library/websites/build-a-responsive-website/adaptive-design/implementing-media-queries
My code looks like hers but I cannot get the contact button to look like hers and under the other navigation button.
/media queries/ /* iPhone ---------*/
@media screen and (max-width: 480px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width:100%;
}
#nav ul {
margin: 5% 0;
}
#nav ul li {
float: left;
margin: 5% 0;
}
#nav ul li.about {
width: 20%;
}
#nav ul li.pricing {
width: 50%;
}
#nav ul li.locations {
width: 30%;
}
#nav ul li.contact {
width: 100%;
margin: 0;
font-size: 1em;
}
}
6 Answers
Angela Fonteboa
2,267 PointsWhen was the code for the contact button changed?
Cherry Blue
Courses Plus Student 1,422 PointsThat confused me aswell and so I went back through all the videos in the previous smells like bakin project but they never style the contact button.
When we finish the course with Nick the contact link is plain text, when Allison starts her course she shows us the website on the screen right at the beginning of the first video and it has red 'contact' and 'read more' buttons. I wouldn't worry about it you can just have a mess around with it later on to make it look like hers.
James Barnett
39,199 PointsIt's always a good idea to download the project files at the start for every project, that way you won't get confused.
Debra Issac
1,466 PointsYou guys should really fix these differences between the tutorials so people can follow along with the code they've already written instead of just staring at the downloadable solutions.
James Barnett
39,199 PointsDebra Issac - I don't work for Treehouse I'm just another member whose very active on the forums.
Here's my 2 cents, the Build a Responsive Website course is actually an intermediate course, here on I forums I find that most people who have trouble following along with that code is because they skipped over the CSS Foundations course.
My suggestion is that you follow the Learn HTML & CSS learning adventure.
Debra Issac
1,466 PointsI see. Well, thank you for the advice. I will look into it.
Bhavesh Hirani
7,381 Pointswhere can i download the finished project code. I'm building a website similar to that but the contact form doesnt work as shown in the interactive web design module.
Conchubhair Mac Lochlainn
1,791 PointsHi Guys,
I'm having much the same problem with the code that's copied and pasted in there. I also don't have the styling on the Contact Us button, and am assuming that it won't make too much difference to the overall aesthetic for now, it's more that when I type in the identical code to Allison's, the browser simply isn't picking it up. Is there something in particular wrong with the layout that anyone has seen?
Debra Issac
1,466 PointsI think the issue is that the index.html file Allison uses in her tutorial is slightly different from the one written in the tutorials up until then. Note the differences in the following pieces of code.
from my index.html (written from Nick's tutorials)
<div class="grid_8 omega">
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Cupcakes & Prices</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
from Allison's index.html (contained within the project file download)
<div id="nav" class="grid_8 omega">
<ul>
<li class="about"><a href="#">About</a></li>
<li class="pricing"><a href="#">Cupcakes & Prices</a></li>
<li class="locations"><a href="#">Locations</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>
</div>
See how in my code, "nav" is a class applied to the unordered list (ul) element, while in Allison's code, "nav" is an id applied to the div? Because in our code, there is nothing identified with a "nav", the code that you copied from the video which is intended to affect elements with that id does nothing. Going even further, the classes applied to the list items (li) in Allison's index.html code and not present in my index.html, so all of the "nav" id codes that attempt to call on these classes also have no effect.
Unfortunately, I think the best thing to do is just work with the downloadable project files. I feel like it's not as helpful as writing it out yourself, but it doesn't seem like the index.html/style.css from the previous tutorials is compatible here.
James Barnett
39,199 PointsUnfortunately, I think the best thing to do is just work with the downloadable project files. I feel like it's not as helpful as writing it out yourself
I tend to disagree with that point, personally I think you should always just watch the video and take notes on the important concepts and the syntax of the code being taught.
Coding is about learning to solve problems not to transcribing code the teacher is dictating in a video.
There's an interesting discussion over in this thread on taking notes vs following along in a text editor.
Jonathan Scheel
5,531 PointsShe lost me as well when she pasted such a large chunk of code. When Nick did this, there was a review of what was just pasted... along with an explanation. When Allison did it, there was no explanation and we were on to the next code pasting without understanding what just happened. This section should really be reviewed and revised to better explain what is going on in such a large chunk of code.