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

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Hoormazd Kia
PLUS
Hoormazd Kia
Courses Plus Student 6,075 Points
Posted by Hoormazd Kia
Hoormazd Kia
Courses Plus Student 6,075 Points

adjusting navigation for 660px screens and larger

around 2:16 Nick begins styling the nav rule under our second media query. Placing the following code...

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

I checked my work over and over again and can't find out what i'm doing wrong, but the nav menu drops down as if it was outside of the header. Since the default of our nav menu text color is white, they vanish save for the selected page.

Can anyone help me with this?

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Are you fine below 660px? Did the problem only begin once you added the nav rule to that media query?

Maybe post your css for that media query. https://teamtreehouse.com/forum/posting-code-to-the-forum

Or put your html/css in a codepen to make it easier to troubleshoot.

Hoormazd Kia
Hoormazd Kia
Courses Plus Student 6,075 Points
Hoormazd Kia
Hoormazd Kia
Courses Plus Student 6,075 Points

Hi Jason,

Thanks for the advice and yes, the problem starts when I add the nav rule to to the following 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%;
    } 
}

I figured the issue might be that I was using a different font style and the width might be an issue. Sure enough, when I decreased the width the 40% it partially solved the problem, however, there's something else wrong with my code. Under the tutorial's main.css file (this is the responsive.css file) the header rule is coded to float left. Toying with the code, I repeated this rule to see if it fixed the problem and sure enough it did...

@media screen and (min-width: 660px) {

    /************************************************************
    HEADER
    ************************************************************/   
    header {
        float: left;
    }
    nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 40%;
    } 
}

(EDIT: Solved the issue. Amazing how you can look over the same block of text and not see it...) I finally went to http://jigsaw.w3.org/css-validator/ and it found a syntax error in my main.css file. Time for a break!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Glad you got it worked out. So because of the syntax error your header float: left from main.css wasn't taking effect. This caused the header to collapse which I think was what you were seeing.

Normally a parent will not contain its floated children. Floating the parent is one way to get it to contain its floated children.

Not sure if you knew this already but I thought I'd mention it.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

nav a{ color: } To change the color of text. And nav li{ display:inline} To change the drop down list in becoming horizontal

Hoormazd Kia
PLUS
Hoormazd Kia
Courses Plus Student 6,075 Points
Hoormazd Kia
Hoormazd Kia
Courses Plus Student 6,075 Points

First off thanks for the response!

earlier tutorial used display:inline-block for width and height. Nav a color would make the menu appear, but that still doesn't change the fact that the nav is in the wrong place.

If you click on the video and open the responsive.css from that tutorial you will see there's a media query attached where if the digital screen exceeds 660px the navigation should appear to the right of the logo (horizontally with its width and height in tact). When i test my code I cannot mimic this, when my browser is stretched past 660px the nav "drops" down to the right of the first image instead of "rising" to the right of the logo.

My css and html files have been practically identical to the tutorials. I can't find anything wrong with my code and I've compared every line to the completed version. Aside from comments, everything looks fine.