Trouble with the images when making the browser smaller!

Question

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)

Answer 1 · 2014-12-21T12:33:58Z

December 21, 2014 12:33pm

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.

Answer 2 · 2014-12-21T12:43:12Z

December 21, 2014 12:43pm

I have the code

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

}

as in the video,

Answer 3 · 2014-12-21T12:54:54Z

December 21, 2014 12:54pm

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 ^^

Answer 4 · 2014-12-21T13:05:41Z

December 21, 2014 1:05pm

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.

Answer 5 · 2014-12-21T13:08:55Z

December 21, 2014 1:08pm

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 ^^

Answer 6 · 2014-12-21T13:13:02Z

December 21, 2014 1:13pm

@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
   *****************************************/

}

Answer 7 · 2014-12-21T13:20:01Z

December 21, 2014 1:20pm

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 ^^

Answer 8 · 2014-12-21T13:24:28Z

December 21, 2014 1:24pm

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; 
} ```

Answer 9 · 2014-12-21T13:28:34Z

December 21, 2014 1:28pm

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

Answer 10 · 2014-12-21T15:51:34Z

December 21, 2014 3:51pm

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 ^^

Answer 11 · 2014-12-21T18:20:38Z

December 21, 2014 6:20pm

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;
} ```

Answer 12 · 2014-12-21T18:53:55Z

December 21, 2014 6:53pm

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? ^^

Answer 13 · 2014-12-21T21:20:34Z

December 21, 2014 9:20pm

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.

Answer 14 · 2014-12-22T18:36:56Z

December 22, 2014 6:36pm

Honestly, I'm not sure.

Welcome to the Treehouse Community

Looking to learn something new?

erdragerdragsson

erdragerdragsson

Trouble with the images when making the browser smaller!

14 Answers

Mikael Enarsson

Mikael Enarsson

erdragerdragsson

erdragerdragsson

Mikael Enarsson

Mikael Enarsson

Mikael Enarsson

Mikael Enarsson

erdragerdragsson

erdragerdragsson

Mikael Enarsson

Mikael Enarsson

erdragerdragsson

erdragerdragsson

erdragerdragsson

erdragerdragsson

Mikael Enarsson

Mikael Enarsson

erdragerdragsson

erdragerdragsson

erdragerdragsson

erdragerdragsson

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

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

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

Mikael Enarsson

Mikael Enarsson

erdragerdragsson

erdragerdragsson

Mikael Enarsson

Mikael Enarsson

erdragerdragsson

erdragerdragsson

Mikael Enarsson

Mikael Enarsson