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.

CSS

Toby DeGrandpre
Toby DeGrandpre
1,530 Points

How to Make a Website > Adjust the Profile Page & Header

I cannot figure out how to add my code via "markup cheatsheet". I am at the point of adjusting the header on the About page in How to Make a Website. As soon as I start adjusting the 660px breakpoint to align the logo text left, the whole navigation header aligns left into a column column and the profile-photo and Info align on the same line, right. I cannot find any missing curly brackets. Can someone help? Here is the page's code...I am sorry it isn't aligned correctly.

@media screen and (min-width: 480px) {
  /***************************
GENERAL
  ***************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

    /***************************
  Figuring Notes: 4 columns * 5 margin = 20
  100% remainder for images - 20 margins = 80%
  80/4 = 20
  ***************************/


   /***************************
  PAGE: PORTFOLIO, 4 COLUMNS
  ***************************/

  #gallery li {
    width: 20%
  }

  #gallery li:nth-child(3n + 1) {
    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: 
  }

}

can u please paste link of your workspace snapshot

6 Answers

Toby DeGrandpre
Toby DeGrandpre
1,530 Points

Treehouse instructor Guil Hernandez looked at the code and identified my error:

It looks like you gave your <header> tags an id of "logo". The id="logo" attribute needs to be in the header's <a> tag instead -- the one containing your name and role.

This fixed my navigation issue! Thank you!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,718 Points

The link to the markdown cheatsheet is below the textbox for adding new posts and will open a modal window with everything you need to know to display your code using markdown.

I added some markdown to your code on this occasion :)

One thing I noticed in your code is your final H1 style rule doesn't have a font size value.

The Syntactically your media queries are correct. I wonder if you're using the right queries for your media queries, i.e. maybe you need to target maximum widths instead of minimum widths?

@media screen and (max-width: 480px) {
}

@media screen and (max-width: 660px) {
}
Toby DeGrandpre
Toby DeGrandpre
1,530 Points

http://cmccontentmarketing.com/code-image/

I've posted an image here of the issues I am having. The code for the breakpoints is the same that is used in the instruction video. What would be helpful is if the correct code was posted for students to compare their code against and troubleshoot the problems.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,718 Points

After a closer look,

in your 480 breakpoint, your list items inside the div with the id of gallery doesn't have a semi colon which can confuse the browser. Try fixing that and see what happens. :-)

 /***************************
  PAGE: PORTFOLIO, 4 COLUMNS
  ***************************/

  #gallery li {
    width: 20%;
  }

  #gallery li:nth-child(3n + 1) {
    clear: left;
  }
Toby DeGrandpre
Toby DeGrandpre
1,530 Points

Thank you for catching that one; unfortunately, it didn't help. I think I am just going to start the Responsive sheet from scratch and see if I can make it work. Thank you!

Toby DeGrandpre
Toby DeGrandpre
1,530 Points

I started the Responsive.css file from the beginning, following every code accurately to the "T". I left the color codes so that I could easily identify where the possible problem is. As soon as I add the code below, it breaks here:

html and css

#logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;

I cannot move forward without resolving this. Also, the pseudo-class (initially used and the correction, does not resolve pushing the third photo in proper alignment. I am using Chrome for the browser.

html and css

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

  #gallery li {
    width; 28.3333;    
  }

  #gallery li:nth-child(3n + 1) {
    clear: left;
  }

Hopefully, the addition of the "backticks" sets this code correctly for displaying. Here is the updated link to view the images: http://cmccontentmarketing.com/code-image/

Jay Padzensky
Jay Padzensky
4,719 Points
  #gallery li {
    width; 28.3333;    
  }

Looks like your width declaration has a ";" instead of ":"

Toby DeGrandpre
Toby DeGrandpre
1,530 Points

Thank you for the catch Jay. Unfortunately, that didn't fix the problem.

Toby DeGrandpre
Toby DeGrandpre
1,530 Points

My latest responsive.css file:

@media screen and (min-width: 480px) {
  body {
    background: navy;
  }

    /**************************
   TWO COLUMN LAYOUT
  ***************************/

  #primary {
    width: 50%;
    float: left;

  }

  #secondary {
    width: 40%;
    float: right;
  }

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

  #gallery li {
    width: 28.3333;    
  }

  #gallery li:nth-child(3n + 1) {
    clear: left;
  }

  /**************************
   PAGE: ABOUT
  ***************************/

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

}

/**************************
SECOND MEDIA QUERY BREAKPOINT
***************************/


@media screen and (min-width: 660px) {
  body {
    background: darkgreen;
  }

   /**************************
   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%;
  }


}```