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 CSS Layout Basics CSS Layout Project Column Layout with Media Queries

maya sophie
maya sophie
5,754 Points
Posted by maya sophie
maya sophie
5,754 Points

only 2 columns are sitting side by side

I have written step by step teacher's code but instead of 3 columns side by side I have only 2.I checked the code and I just can't find the error: the last column is sitiing under the other two!!!! I'm so tired....Extra question: is this a common step in learning to became web developer(not being able to spot errors or fix them????????)? or am I to stupid?????

https://w.trhou.se/tngeak9isx https://w.trhou.se/4gv4c6fjbp

2 Answers

Daniel Baker
Daniel Baker
15,369 Points
Daniel Baker
Daniel Baker
15,369 Points

Extra } I think?

@media (min-width: 769px) {
  .container {
    width: 90%;
    margin: 0 auto;
}
  .name,
  .col {
    float: left;
}
  .primary,
  .secondary {
    width: 50%;
}
  .main-nav {
    float: right;
}
  .main-nav li {
    display: inline-block;
    margin-left: 15px;
}
  .tagline {
    font-size: 1.4em;
}
} <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

}
Daniel Baker
Daniel Baker
15,369 Points

Answer to Extra Question.

Troubleshooting is a primary skill in web development. When ever you are writing code you are solving problems. Troubleshooting your own problems goes hand in hand with that. However; sometimes you need to step away from the code, take a walk, use the bathroom then come back with fresh eyes.

Sometimes you don't have time for that. Often times a second person reading through your code will spot the problem cause they are seeing your work differently than you are.

Daniel Baker
Daniel Baker
15,369 Points

Just today I had to double check all my steps in a course just to find I typed var gulp = request('gulp'); instead of var gulp = require('gulp'); It's shocking what we can miss when we are too close to it.

maya sophie
maya sophie
5,754 Points
maya sophie
maya sophie
5,754 Points

I don't think that's the problem...the } is at the end....is the one closing media ...any other solutions pls?

Daniel Baker
Daniel Baker
15,369 Points

One of these two are extra.

@media (min-width: 769px) {
  .container {
    width: 90%;
    margin: 0 auto;
}
  .name,
  .col {
    float: left;
}
  .primary,
  .secondary {
    width: 50%;
}
  .main-nav {
    float: right;
}
  .main-nav li {
    display: inline-block;
    margin-left: 15px;
}
  .tagline {
    font-size: 1.4em;
}
} <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

}<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Daniel Baker
Daniel Baker
15,369 Points
Daniel Baker
Daniel Baker
15,369 Points

I don't think that's the problem...the } is at the end....is the one closing media ...any other solutions pls?

Did you test it? Please Follow all the brackets below.

@media (min-width: 769px) { 
  .container {
    width: 90%;
    margin: 0 auto;
} /* .container end */

  .name,
  .col {
    float: left;
} /* .name, .col end */

  .primary,
  .secondary {
    width: 50%;
} /*  .primary,  .secondary end */

  .main-nav {
    float: right;
}  /*  .main-nav end */

  .main-nav li {
    display: inline-block;
    margin-left: 15px;
}  /*  .main-nav li end */

  .tagline {
    font-size: 1.4em;
}  /*  .tagline end */

} /* Don't end @media here, you want the clearfix included in your @media <<<<<<<<<<<<<<< */

    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    } /* .clearfix::after end */

} /* @media (min-width: 769px) End  <<<<<<<<<<<<<<<<*/ 
/*This is where your media actually ended so the one above is extra... */


@media (min-width: 1025px) {

  .container {
    width: 80%;
    max-width: 1150px;

 }
   .primary {
      width: 40%;
 }
   .secondary,
   .tertiary {
      width: 30%;
 }
}
Daniel Baker
Daniel Baker
15,369 Points

The reason your 3 columns won't work is because the CSS breaks when there is an error in the syntax. so it was never able to get to the next media size. This is where it would allow for 3 columns.

} // CSS Broke


@media (min-width: 1025px) { 

  .container {
    width: 80%;
    max-width: 1150px;

 }
   .primary {
      width: 40%;
 }
   .secondary,
   .tertiary {
      width: 30%;
 }
}