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 trialmaya sophie
5,754 Pointsonly 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?????
2 Answers
Daniel Baker
15,369 PointsExtra }
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
15,369 PointsI 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
15,369 PointsThe 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%;
}
}
Daniel Baker
15,369 PointsDaniel Baker
15,369 PointsAnswer 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
15,369 PointsDaniel Baker
15,369 PointsJust today I had to double check all my steps in a course just to find I typed
var gulp = request('gulp');
instead ofvar gulp = require('gulp');
It's shocking what we can miss when we are too close to it.maya sophie
5,754 Pointsmaya sophie
5,754 PointsI don't think that's the problem...the } is at the end....is the one closing media ...any other solutions pls?
Daniel Baker
15,369 PointsDaniel Baker
15,369 PointsOne of these two are extra.