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 trialAaron Coursolle
18,014 PointsWeb Page breaks
/*****************************
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
*****************************/
#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;
}
/*****************************
FOOTER
*****************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
/*****************************
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;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile */
nav {
background-color: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
When I shrink the browser down to phone size, the third image is aligned to the right, with a blank space under the first image. I notice that the first image caption becomes three lines, while the second image caption only has two lines. I'm not claiming that the code is error-free but I've looked again and again for a missing colon/semicolon or spelling error in the css and can't find one.
2 Answers
A.J. Kandy
Courses Plus Student 12,422 PointsAre you applying a clear
to the images? I think this gets covered a little later on in the course where he shows you how to use clear
with floats and the nth-child
pseudoselector.
Aaron Coursolle
18,014 PointsFor future reference, nth-child
is described here, as A.J. said, later in the same course:
https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/build-a-three-column-layout
Aaron Coursolle
18,014 PointsAaron Coursolle
18,014 PointsSo far he has only mentioned
clear
with the footer. I'm patient, but I was comparing my browser display with Nick's (the teacher).