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

Posted by Yassin Sassi
Yassin Sassi
3,571 Points

Is this normal?

Is there a way to remove the white space next to the 6? I am getting this when I resize the browser window.

http://imgur.com/a/oaz4U

Sorry here is my code:

/*********
GENERAL
**********/

body {
  font-family:'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}



#wrapper {
 max-width:940px;
 margin:0 auto;
 padding: 0 5%;
}

/*links*/
a {
  color: #6ab47b;
  text-decoration: none;
}

img {
  max-width:100%;
}

h3 {
  margin:0 0 1em 0;
}

/*********
HEADING
**********/

heading {
  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;
  margin-top: 0;
  font-size: 1.75em;
  font-weight:normal;
  line-height:0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight:n+
}

/*green header*/
header {
  background: #6ab47b;
  border-color: #27ae60;
}


/*********
NAVIGATION
**********/
nav{
  text-align: center;
  padding:10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  padding: 0;
}

nav li {
  display:inline-block;
}

nav a {
  font-family: 'Changa One', sans-serif;
  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;
}


/*********
PAGE: ABOUT
**********/

.profile-photo {
  display:block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/*********
PAGE: CONTACT
**********/

.contact-info {
  list-style: none;
  padding:0;
  margin:0;
  font-size: 0.9em;
}

.contact-info a {
  display:block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image:url('../img/phone.png');
}

.contact-info li.mail a {
  background-image:url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image:url('../img/twitter.png');
}

/*********
COLROS
**********/

/*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;
}
/*site body*/
body {
  background-color: #fff;
  color: #999;
}
Kris Blanchette
Kris Blanchette
174 Points

Do you want the white space to be on the bottom right instead of next to the 6? I figure there needs to be whitespace somewhere since you have an un even amount of pics. If so, could you post the code that you currently have?

Kathryn Notson
Kathryn Notson
25,941 Points

Yassin Sassi:

Don't forget when you post your code that your spelling is accurate, too. Even if it's a Comment on your code. Your "COLROS" should be "COLORS." This matters. Coding is very precise & accurate.

I agree with Jason Anello's comment, too. Your "nth-child (2n + 1)" is the correct notation. Be sure to review the video discussing "nth-child." You can always pause the video & rewind it to review it as many times as you need to.

2 Answers

Damien Watson
Damien Watson
27,419 Points

Hey Yassin,

It looks like you are floating your 'list items' to the left. '6' is positioned this way because image '1' has a larger caption size than '2'.

The main work around for this is to clear the float on the 'nth' item, this will mean that your item won't get stuck.

See the last line of the css, this is clearing the float on every third item in the list.

HTML

<!-- Example structure -->
<ul id="gallery">
  <li><img src="1.jpg" alt="1"><p>Caption 1<br>Second line!</p></li>
  <li><img src="2.jpg" alt="2"><p>Caption 2</p></li>
  <li><img src="6.jpg" alt="6"><p>Caption 6</p></li>
  <li><img src="9.jpg" alt="9"><p>Caption 9</p></li>
  <li><img src="12.jpg" alt="12"><p>Caption 12</p></li>
</ul>

CSS

#gallery                 { margin:0; padding:0; list-style:none; }
#gallery li              { float:left; border:1px solid red; }
#gallery li:nth-child(3) { clear:left; }
Yassin Sassi
Yassin Sassi
3,571 Points

Thank you so much it was really bothering but your solution worked!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Damien,

You only have a 3 for your nth-child expression which is going to clear the 3rd item only. This solves the specific problem shown in the screenshot but not the general case.

You want to clear the first item of every row and in a 2 column layout that would be 1, 3, 5, 7,...

nth-child(2n + 1) would do that.

Damien Watson
Damien Watson
27,419 Points

Yeh good call Jason. This is also for 2 column on mobile, where desktop you may want 3 or 4 columns, so...

nth-child(3n + 1) for 3 columns or 4n+1 for 4

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

There is a couple of options you can do, but we need to see your css to se how you have it styled. It looks like you are floating the imgs right, but I'm not sure.