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
Steve Isaacs
2,112 PointsMy workspaces site doesn't quite look like the video after this lesson and I can't see why.
When my window is mobile size, the thumbnails are in a grid, but there is an open grid space between thumb 2 and 3. The code seems exactly as it is in the video.
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsThe reason you see this happening is because your 1st item caption has wrapped to 2 lines making it extend down farther than the 2nd item.
This effectively blocks your 3rd item from floating all the way to the left. Your 3rd item needs to clear the previous floats so that it will be forced down below both the 1st and 2nd items and be able to move all the way to the left.
The problem isn't explained until later on in the responsive part of the course. You may want to briefly jump ahead to this video: http://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/build-a-three-column-layout
You can use nth-child in main.css to fix the 2 column layout problem.
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
/* Add this */
#gallery li:nth-child(2n + 1) {
clear: left;
}
This will clear the 1st, 3rd, 5th, 7th,... items or the 1st item in every row on a 2 column layout.
Save the following for when you get to the video linked to above:
When you get to responsive.css you'll end up writing :nth-child(3n +1) to fix the 3 column layout but the earlier one you wrote for the 2 column layout will mess this up and so you have to remove the clear property on those items first.
In responsive.css:
#gallery li:nth-child(2n + 1) {
clear: none; /* Sets the clear property back to initial value for the items set in main.css */
}
#gallery li:nth-child(3n + 1) {
clear: left; /* sets the clear property on the correct items for a 3 column layout */
}
So save the responsive.css somewhere for when you get to that part of the course.
Steve Isaacs
2,112 PointsOops, sorry - revised link.
Steve Isaacs
2,112 PointsI see that it might be an issue between safari and chrome. When I view in Chrome and shrink to the smallest size, it looks like the video, but safari doesn't allow me to shrink to that size, so I see this intermediate weirdness.
BUT
Now my nav doesn't seem like it has the same padding / margin in the video (I have no idea which, cause this is a blur to me). I wish Treehouse had a link so you could A/B your code with the instructor's, so you could check your code without scrubbing the video.
Jason Anello
Courses Plus Student 94,610 PointsFor this nav problem I think you'll have to post the css in your navigation section. It looks like you're missing top and bottom padding on the ul
Jason Anello
Courses Plus Student 94,610 PointsSorry, not the ul but both the nav and the links have padding applied. You might have an error with one of those.
Steve Isaacs
2,112 Pointscss /************************
GENERAL
************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width:100%;
}
/************************
HEADING
************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height:0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight:normal;
}
/************************
NAVIGATION
************************/
nav {
text-align: center;
padding: 10px, 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/************************
FOOTER
************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/************************
PAGE: PORTFOLIO
************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/************************
COLORS
************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* links */
a {
color: #6ab47b;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
It's getting really frustrating in that if there is a problem with my code I have no way to go back and find out whats wrong unless I keep clicking and scrubbing through videos. If you fall off track, it kinda of seems like you're screwed.
Thanks so much for the help, Jason :)
Steve Isaacs
2,112 PointsJesus, this is just not my day. I tried adding the "backticks" like it said in the markdown link to show code the right way in this comment and even that didn't work.
Steve Isaacs
2,112 PointsOh I just found the css files for download - never mind about the scrubbing back through videos note. Looking for where i went wrong with my css.
Steve Isaacs
2,112 PointsJust A/B'd my code with the instructor code. Look exactly the same. Discouraged.
Jason Anello
Courses Plus Student 94,610 PointsYou have a comma between your padding values here:
nav {
text-align: center;
padding: 10px, 0; /* Need to remove comma here */
margin: 20px 0 0;
}
I realize if you're new to this then it's going to be hard to track down your own problems. One thing you can do is download the project files and compare with your code to try to find a difference. That would be easier than trying to find the right spot in a video.
You also have the validators at the w3c which I think you're introduced to later in this course.
html validator: http://validator.w3.org/
css validator: http://jigsaw.w3.org/css-validator/
These will help catch invalid markup you have written as well as syntax errors.
In fact to get some practice you should paste the nav css into the direct input tab of the css validator.
I get the following error:
Value Error : padding , is an incorrect operator : 10px,0
That's telling you the comma you have in there is invalid.
Steve Isaacs
2,112 PointsThank you!!! - any idea why I can't post correct code in these comments using backticks?
Jason Anello
Courses Plus Student 94,610 PointsI hadn't seen your 3 comments yet when writing mine so you've already discovered the code.
This thread will help with posting code: https://teamtreehouse.com/forum/posting-code-to-the-forum
Steve Isaacs
2,112 PointsOk, I'm back on track, all thanks to you Jason. Thanks so very much.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Steve,
Do you have the right screenshot?