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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Aaron Coursolle
Aaron Coursolle
18,014 Points

Web 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
PLUS
A.J. Kandy
Courses Plus Student 12,422 Points

Are 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
Aaron Coursolle
18,014 Points

So far he has only mentioned clear with the footer. I'm patient, but I was comparing my browser display with Nick's (the teacher).