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

Ronnelle Torres
Ronnelle Torres
5,958 Points
Posted by Ronnelle Torres
Ronnelle Torres
5,958 Points

Hi! Please help with the navigation issue! I've attached a screenshot here

My navigation has an issue with floating. To better understand, please see screenshot below:

float

https://drive.google.com/file/d/0B8kwZLc-yGOIeGh4YktTR203ZTA/view?usp=sharing

4 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

The issue with the primary and secondary content on your contact page I believe is down to this

@media screen and (min-width:480px) {!important  /*this "!important" text seems to be messing with the media query and preventing the css for #primary being applied remove this and it should work "*/

    /********************************
    TWO COLUMN LAYOUT
    ********************************/
    #primary {
      width:50%;
      float:left;
      }
    #secondary {
        width:40%;
        float:right;
      }



    /********************************
    PORTFOLIO PAGE
    ********************************/

    /********************************
    FOR IMAGE LIST WIDTH
    3*5 = 15
    100% - 15% = 85%
    85 / 3 = 28.3333333333
    ********************************/
    #gallery li {
       width:28.3333%;
      }
    #gallery li:nth-child(3n+1)  {
      clear:left;
      }


    /********************************
    About page
    ********************************/
  .profile-photo {
    float:left;
    margin:0 5% 100px 0;
  }
}

Hope that solves it now for you

Ronnelle Torres
Ronnelle Torres
5,958 Points
Ronnelle Torres
Ronnelle Torres
5,958 Points

Oh God! Thank you Billy! You're awesome! Cheers! :D

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

The problem you are reporting with the nav in your picture is just a breaking point with your responsive design.

The code below should help rectify the issue by tweaking your media query screen size.

I also tweaked the floats at larger screen resolutions so the nav falls up into the header.

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

    /********************************
    Header
    ********************************/

      header {
        height: 100px; /*delete if you don't want nav in header*/
      }


      #logo {
        float:left;    /*delete if you don't want nav in header*/
        width:50%;  /*delete if you don't want nav in header*/
      }

      nav {
        float: right;
        background:none;
        font-size:1.125em;
        margin-right: 5%;
        text-align:right;
        width:45%;  /*delete if you don't want nav in header*/
      }


}
LaToya Legemah
LaToya Legemah
12,600 Points
LaToya Legemah
LaToya Legemah
12,600 Points

how can I get html code to show up in my answers? I'm trying " '''html"' but its giving me garbage..

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

you need to enclose the code into the tags eg

``html

code here

``

of course use the 3(```) rather than the 2 I've used to demonstrate.

Ronnelle Torres
Ronnelle Torres
5,958 Points
Ronnelle Torres
Ronnelle Torres
5,958 Points

Woahh! This worked! Thanks! Billy! I have another inquiry though, if you don't mind. :)

Ronnelle Torres
Ronnelle Torres
5,958 Points
Ronnelle Torres
Ronnelle Torres
5,958 Points

Here it is Billy

The float of the contact details is mysteriously not parallel with the general info. don't know what I did wrong :(

When it's on the desktop version this problem occurs.

https://drive.google.com/open?id=0B8kwZLc-yGOIdXBPN2ZIWVVlOEE

Here's my code :

https://w.trhou.se/ejhm1repki

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

As with your previous question a picture alone isnt too helpful in us lending assistance please provide code or a snapshot.

Instructions from my last comment on your other question again:

Can you share your HTML and CSS code so we can see exactly what the issue is.

If your working on workspaces create a snapshot at top right of workspaces page and share the link.

Thanks

Ronnelle Torres
Ronnelle Torres
5,958 Points
Ronnelle Torres
Ronnelle Torres
5,958 Points

Sorry! :) Here's my code. Thanks Billy! :)

http://w.trhou.se/jitlmaooxn

It's on the responsive css file. on the navigation part of the header :)

LaToya Legemah
LaToya Legemah
12,600 Points
LaToya Legemah
LaToya Legemah
12,600 Points

Found the problem.

You have a closing } that's stopping the rest of the css file.

In the responsive.css line 41, remove the extra " } "

.profile-photo { float:left; margin:0 5% 80px 0; } "" } <----- Gotta go.. ""

Let me know your result. :)

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

That's the closing brace for the media query not an extra }.

If it were not in a media query this could have caused problems but not the one reported with the nav issue.

Ronnelle Torres
Ronnelle Torres
5,958 Points
Ronnelle Torres
Ronnelle Torres
5,958 Points

I appreciate the Help Latoya! :)