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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by elsie bogaert
elsie bogaert
4,335 Points

images don't stack up for smaller screen versions when I make my browser window smaller

When I look at my gallery in a desktop browser I have 3 columns for my pictures, which is what I want, but then as the browser gets smaller, such as for mobiles, it's supposed to stack the pictures down, instead they just get really small so they stay inline with each other. I'm not sure what went wrong but here's my code....

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Life Journey</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Yantramanav" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>My Journey to Self Growth</h1> </a> <nav> <ul> <li><a href="index.html" class="selected">Home</a></li> <li><a href="contact.html">contact</a></li> <li><a href="about.html">About</a></li> </ul> </nav>

</header>
<div id="wrapper">
<section>    
  <!-- gallery pictures -->
  <ul id="gallery">
    <li>
      <a href="image/ying yang.jpg">
        <img src="image/ying yang.jpg" alt="ying yang sign in fire and ice.">
        <p>Experimenting with captions... ying yang picture</p>
      </a>
    </li>
     <li>
      <a href="image/fire_and_ice_by_jojoesart-da28aqe.jpg">
        <img src="image/fire_and_ice_by_jojoesart-da28aqe.jpg" alt="">
        <p>Experimenting with captions... wolf picture</p>
      </a>
    </li>
     <li>
      <a href="image/pichu.jpg">
        <img src="image/pichu.jpg" alt="">
        <p>Experimenting with captions... young pichu</p>
      </a>
    </li>
  </ul>
</section>
</div>
<footer>

responsive css file:

@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(3n + 1) {

clear:left; }

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

}

Advice would be appreciated...

1 Answer

ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points 
@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(4n) {
  clear: left;
  }

}
  1. Please noticed the last curly brace, which is missing in your code.
  2. The last curly brace in below line is redundant.
#secondary { width: 40%; float: right; } }

If you still cannot figure it out, please copy my code directly and you will find the differences. :)