Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Angela Fonteboa
Angela Fonteboa
2,267 Points

Implementing 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
Angela Fonteboa
2,267 Points

When was the code for the contact button changed?

That 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
James Barnett
39,199 Points

It's always a good idea to download the project files at the start for every project, that way you won't get confused.

You 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
James Barnett
39,199 Points

Debra 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.

I see. Well, thank you for the advice. I will look into it.

Bhavesh Hirani
Bhavesh Hirani
7,381 Points

where 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.

Hi 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?

I 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 &amp; 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
James Barnett
39,199 Points

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

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
Jonathan Scheel
5,531 Points

She 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.