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 Responsive Web Design and Testing Website Testing

Trouble with the images when making the browser smaller!

Hey when i maing my browser smaller , the images in the gallery moves to the right, and leaves a area with no images to the left.

i fixed it by, making the captions to the images smaller, but is there another way to fix this, because i want the whole line of text underneath the images. i have followed the videos, but i cant get it right,

this is how it looks like. http://imgur.com/6gD4WbL

(i didnt know how to upload pictures here, so i used imgur, i hope its okey)

14 Answers

Mikael Enarsson
Mikael Enarsson
7,056 Points

I think you can fix it using clear: left;

Edit: You need to do it with the nth-child psuedo-class though, like so:

#gallery li:nth-child(3n) {
    clear: left;
}

Or something to that effect.

I have the code

#gallery li:nth-child(4n) { clear: left;

}

as in the video,

Mikael Enarsson
Mikael Enarsson
7,056 Points

That is for the responsive style, no? Meaning that it will only take effect when (if we have the same specs) the page width is more than 480px.

Also, nth-child(4) means that every 4th item will clear on the left, which isn't what you want if you want 2 columns.

All that being said, I made some research here, and noticed that I have made a mistake, and that the correct form is

#gallery li:nth-child(2n+1) {
    clear: left;
}

That fixes some problems I've had with my own page up till now, so thank you for making me look into that ^^

Mikael Enarsson
Mikael Enarsson
7,056 Points

Oh, I should probably mention (if you don't already know) that you have to clear this command in responsive.css before you add the 3 column rule:

#gallery li:nth-child(2n+1) {
    clear: none;
}

#gallery li:nth-child(3n+1) {
    clear: left;
}

i did exactly as the code you wrote, but it still doesnt work, i still have the same problem when my browser is small, i did the browserstack simulation with an iphone 5 and the images was placed as in the picture.

i have no idea what to do, how do i send code in a code format as you did? so you can see my codes.

Mikael Enarsson
Mikael Enarsson
7,056 Points

That would be very helpful. There are instructions in the Markdown Cheatsheet under the Add an Answer field, but basically you type three grave accents (`) followed by the language you want formatted, and you close by typing three more accents ^^

@media screen and (min-width: 480px) {

/**************************************** TWO COLUMN LAYOUT *****************************************/

   #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

/**************************************** PAGE: PORTFOLIO *****************************************/

   #gallery li {
    width: 28.3333%; 
  }


  #gallery li:nth-child(2n+1) {
     clear: none;

  }

  #gallery li:nth-child(3n+1) {
    clear:left; 
  }
  /****************************************
      PAGE: ABOUT
      *****************************************/
  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

@media screen and (min-width: 660px) {

 /****************************************
HEADER
 *****************************************/
```
nav {
  background: none;
  float: right;
  font-size: 1.125em;
  margin-right: 5%;
  text-align: right;
  width: 45%; 
}

#logo {
 float: left;
  margin-left: 5%;
  text-align: left;
  width: 45%;
}

h1 {
 font-size: 2.5em;    
}

h2 {
  font-size: 0.825em;
  margin-bottom: 20px;
}

header {
  border-bottom: 10px solid #599a68;
  margin-bottom: 65px;
}
  /****************************************
    PAGE: FOOTER
   *****************************************/

}

okey, it looka kinda wierd, i didnt know how to set the (`) i hope you can read it:D

Mikael Enarsson
Mikael Enarsson
7,056 Points

Yes, I can read it fine, with a little bit of headache XD Anyway, this is only your responsive.css, not your main.css, right? You have to add

#gallery li:nth-child(2n+1) {
    clear: left;
}

either in your main.css or before any of your media queries in responsive.css

I hope that helps, otherwise I can take a look at your main.css as well ^^

MAIN CSS, STYLING OF THE WEBSITE
***********************************************/

body {
  font-family: 'Lora', serif;
}


/*Makes the whole div section, have max-width of 940px, with margin 0 , auto and a padding of: 0, 5% */
#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

/*makes the underline disapear, and while clicking, you get pointer*/
a {
    text-decoration: none;
    cursor: pointer;
}

img {
 max-width: 100%; 
}


h3 {
 margin: 0 0 1em 0; 
}


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

/* margin moves it 30px to the bottom*/
header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}


/*Makes the text in the header align center, and with margin 0*/
#logo {
    text-align: center;
    margin: 0;
}

h1 {
  font-family: 'Sansita One', cursive;
  margin: 15px 0;
  font-size: 2.0em;
  font-weight: normal;
  line-height: 0.8em;
  text-shadow: 1px 1px 1px black;
}

h2 {
  font-size: 1em;
  margin: -5px 0 0 7px;
  font-weight: normal;
  text-shadow: 1px 1px 1px black;  
}


/****************************************
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: 900;
  padding: 15px 10px;  
}




/****************************************
FOOTER
*****************************************/

footer {
  font-size: 1.2em;
  text-align:center;
  clear: both;
  padding-top: 50px;
  color: #989898;
}

.social-icon {
  width: 35px;
  height: 35px;
  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.8em;
  color: #898989;
}

.images {
  border-radius: 5px; 
}


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

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


/****************************************
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');
}




/****************************************
COLORS
*****************************************/

/* Change the body background to white, and the text to grey*/
body {
  background-color: #fff;
  color: #999;
}


/* Changing the headers background to green and the border color to dark green*/
header {
  background: #6ab47b;
  border-color: #599a68;
}


/* nav background on mobile*/
nav {
 background: #599a68;
}

/* LOGO TEXT*/
h1, h2 {
  color: #fff;
}

/*Change the link colors to Green*/
a {
  color: #6ab47b; 
}

/* nav visited*/
nav a, nav a:visited {
 color: #fff;
}

/* selected nav link*/
nav a.selected, nav a:hover {
  color: #32673f; 
} ```

i put the code you wrote over the media code, and now it works! thank you,

can you explain what the

gallery li:nth-child(2n+1) {

clear: none;

}

gallery li:nth-child(3n+1) {

clear: left;

does, i kinda get what they do, but not fully, so if you have time to explain, so i can learn, it would be awesome:)

and why i have to add the

gallery li:nth-child(2n+1) {

clear: left;

before the media. // kind regards ; Erdrag

Mikael Enarsson
Mikael Enarsson
7,056 Points

Glad you got it working ^^

I'll try, though I still find myself occasionally confused by them.

For an example, I'll use the code we have been working with, mare or less:

#gallery li:nth-child(2n) {
    background: #ff0000;
}

This means that, for li elements that are child elements of a #gallery, every second will have a red background:

<ul id="gallery">
    <li></li>       # 1
    <li></li>       # 2 red background
    <li></li>       # 3
    <li></li>       # 4red background
    <li></li>       # 5
    <li></li>       # 6 red background  
</ul>

If you change the 2 to a 3, every third item will have a red background:

<ul id="gallery">
    <li></li>       # 1
    <li></li>       # 2
    <li></li>       # 3 red background
    <li></li>       # 4
    <li></li>       # 5
    <li></li>       # 6 red background
</ul>

If you do nth-child(2n+1), 1 is the offset:

<ul id="gallery">
    <li></li>       # 1
    <li></li>       # 2 ordinarily, the background would be red here, but
    <li></li>       # 3 <--   because of the offset, this background is red
    <li></li>       # 4
    <li></li>       # 5 red background
    <li></li>       # 6
</ul>

I hope that this makes it somewhat clear, but otherwise you can read more about it here.

The reason that you have to add the code before the media query is that it's a conditional statement, kind of. That is, The code that comes after @media screen and (min-width: 480px) will be processed only if the width of the browser window is at least 480px. You want the rule no apply is all cases where width is smaller than 480px, so you must add it before the query. You can read more about it here.

I hope that this was helpful, and if you have any other questions, don't hesitate to ask ^^

Thanks alot!, theres one thing you can help me with, if you got time ofcourse.

im trying to make a border at the bottom of my page, it works for the home page "index.html" but the other pages it sets the border to the center,

heres the code

 body {
    height: 100%;
    border-bottom-color: #599a68;
    border-bottom-style: solid;
    border-bottom-width: 20px;
} ```
Mikael Enarsson
Mikael Enarsson
7,056 Points

This kind of works:

html {
    min-height:98%;
    border-bottom-color: #599a68;
    border-bottom-style: solid;
    border-bottom-width: 20px;
}

I'm pretty sure that it isn't a perfect solution, but maybe it's good enough for the moment? ^^

thanks it works now, but why do i have to select the html tags, why doesnt the body tags work, because every page has the body tag.