Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

On portfolio page, only 2 images across displays instaed of 3 on large screens

I have replicated the Main CSS and Responsive CSS from the tutorial but I cant get 3 images across on a large screen. I can modify it so I have 3 images across on all screen sizes, but I cant get it to have 2 across on phone size and 3 across on large screens. I have 9 images instead of 5

This is my code: Responsive CSS

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

  /********************************
 TWO COLUMN LAYOUT
**********************************/
#primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }
   /********************************
 PAGE: PORTFOLIO
  ********************************/


  #gallery {
    width: 28.3333;
  }

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

 }

Main CSS

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

body {
  font-family:arial, sans-serif;
}

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

 a {
  text-decoration: none;
}   

img {
max-width:100%;
}

h3 {
  margin: 0 0 1em 0;  
}
/********************************
HEADING
********************************/
header {
  float:left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
  }

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: arial, 'lato', sans-serif;
  margin: 15px 0; 
  font-size:1.75em;
  font-weight:100;
  line-height: 0.8em;
}



/********************************
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: 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%;
  padding:0%;
  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 {
  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('../images/phone.png')
}

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


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

/* Site body */

body {
  background-color: #fff;
  color:#999;
}

/* Green Header  */

header {
  background: #6ab47b;
  border-color: #599a68;
}

  /* Nav background on mobile devices */ 

nav {
  background: #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;
}

HTML INDEX

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Design Vision | Maui Architects</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?   family=Lato:400,700,400italic,900,700italic|Open+Sans:400,400italic,700,800'  rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-wifth, initial-scale=1.0">
    </head>
<body>
  <header>
   <a href="index.html" id="logo">
    <h1>DESIGN VISION</h1>
      </a>
  <nav>
    <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>        
        <li><a href="about.html">About</a></li> 
        <li><a href="contact.html">Contact</a></li> 
        </ul>
      </nav>
  </header>
  <div id="wrapper">
    <section>
    <ul id="gallery">
     <li>
        <a href="images/numbers-01.jpg">
          <img src="images/numbers-01.jpg" alt="">
         </a>
     </li>

       <li>
        <a href="images/numbers-02.jpg">
          <img src="images/numbers-02.jpg" alt="">
         </a>
     </li>

       <li>
        <a href="images/numbers-06.jpg">
          <img src="images/numbers-06.jpg" alt="">
          </a>
     </li>

       <li>
        <a href="images/numbers-09.jpg">
          <img src="images/numbers-09.jpg" alt="">
          </a>
     </li>

       <li>
        <a href="images/numbers-12.jpg">
          <img src="images/numbers-12.jpg" alt="">
         </a>
     </li>

           <li>
        <a href="images/numbers-01.jpg">
          <img src="images/numbers-01.jpg" alt="">
         </a>
     </li>

       <li>
        <a href="images/numbers-02.jpg">
          <img src="images/numbers-02.jpg" alt="">
         </a>
     </li>

       <li>
        <a href="images/numbers-06.jpg">
          <img src="images/numbers-06.jpg" alt="">
          </a>
     </li>

       <li>
        <a href="images/numbers-09.jpg">
          <img src="images/numbers-09.jpg" alt="">
          </a>
     </li>
  </ul>
    </section>
  <footer>
    <a href="http://twitter.com/nickrp"><img src="images/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="http://facebook.com/nickpettit"><img src="images/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2016 McCall Architects Inc.</p>
</footer>
  </div>
   </body>
  </html>
Max Kutner
Max Kutner
7,595 Points

Hi,

A few of your selectors are missing '#' if I'm reading this correctly. Also, I've found it easier just to calculate the exact resolutions that need adjusting and using media querries with those figures for adjusting rows. You'll need to figure how much blank space (margins, padding, etc.) is included in the container because the percentage values only refer to how much of the immediate parent the image will take up. This is where the box model comes in handy.

Hope this helps!

Best, Max

10 Answers

Gavin Mace
Gavin Mace
30,747 Points

I could have missed it, but i could only find a gallery Li with max-width of 45%. Other than this:

#gallery { width: 28.3333; }

Maybe use max-width: 28.3333% or similar and apply to gallery Li on devices >660 PX.

Hi Max Thanks for your suggestions I checked all # hash and . dots and they all apperar to be there. Unfortunately I don't yet understand the box model etc. so Im still stuck not understanding why the code from the tutorial isn't working for me. Thanks Jim

Hi Gavin Thanks for your suggestions I believe I have the #gallery li values of 45% and 28.3333% the same as the tutorial code in both the main CSS and the resposnive CSS repectively, so I dont know what you mean

Im still wanting to find out how to have 2 columns of images in phone size and 3 in desktop size screens

Thanks Jim

The Responsive CSS sheet at the top shows the following code but it doesn't do anything. If I delete it the page responds the same. I still don't understand how to get 2 columns of images when screen is under 480px

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

/******************************** TWO COLUMN LAYOUT ********************************/ #primary { width: 50%; float: left; }

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

Check your Index HTML file:

<meta name="viewport" content="width=device-wifth, initial-scale=1.0">

Try "wifth" to "width".

Thanks Jonathan I already changed that misspelling, but it didn't help The mystery continues Aloha Jim

Gavin Mace
Gavin Mace
30,747 Points

Hi James,

I'm suggesting that because you have the width set to 45% on desktop, that's why you're only getting 2 columns per row.

45 * 3 = 135% ... so it pushes it down to the next line

If you set it to 30% .... 30 * 3 = 90% .... so it'd all fit on the same row (I'd allow for some padding).

Hi Gavin When I change it to 30% there are 3 images in a row at ALL screen sizes. It doesnt reduce to 2 across at 480 px. There is obviously something I am not understanding and I don't know what it is Thanks Jim

Okay I think I am having the same problem actually.

Whenever he looks at his site in small-resolution there are 3 columns. Whenever he looks at his site in large-resolution there are 3 columns.

He wants to see his site with 2 columns in small-resolution.

I think the problem is in the fact that the code at the top of the responsive CSS sheet which is supposed to create 2 images across at 480px doesn't do anything. If I delete the following code the page responds the same - 3 images across at all resolutions.

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

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

primary {

width: 50%; float: left; }

secondary {

width: 40%; float: right; }

There is no reference to "primary" or "secondary" in the index.html. Maybe this is the problem?

primary and #secondary are referenced in the contact.html file.

Yes, thanks, you are right, they are But these don't effect the portfolio images, so we have eliminated that as the source of the problem

Okay, I got it to work for myself.

In the responsive.css file inside of

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

you will see:

#gallery { width: 28.3333; }

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

I changed that to:

#gallery li { width: 45%; }

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

Also, inside of

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

I wrote:

#gallery li { width: 28.3333%; }

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

This made it 3 columns when I made a large screen and 2 columns with relatively larger images on a small screen.

I'm pretty sure the #gallery li:nth-child(3n) { clear: right; } code is not ideal. Whenever I change it to (1n) I get the same result.

Hi Jonathan Thank you for continuing to work on this When I use your code I get 3 new results: 1- The image portfolio now spans only about 80% of the screen width with about a 20% white area on the right. I would like the portfolio to span 100% of the screen width 2-The portfolio is now 3 images wide at over 660 and under 480, but it is 2 images wide between 480 and 660. So you did get it to reduce to 2, but only in the 480-660 range. 3-There is a space (gap) after the 5th image in the 480-660 range Thanks Jim

Also, your closing bracket under #gallery li:nth-child(3+1) is misplaced. It should be after .profile-photo's closing bracket

If you want it 2 images across at all sizes, then underneath

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

write

#gallery li { width: 45%; }

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

This should make each image 45% the width of the page at 660 pixels & above.

Tell me how this works.

Hi Jonathan No, I don't "want it 2 images across at all sizes", I would like 3 across on medium and large screens. Two across on phone screen. I would like 9 seamless images, in a 3x3 grid, without paragraphs that span the full width of the larger screens. I have been using width: 100% to achieve the full screen width, but I cant get it to reduce to two images across when I do that Thanks Jim

This at the top of my responsive.css gave me a 2-image phone size screen:

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

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

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

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

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

#gallery li { width: 45%; }

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

in the 660+ media screen part I use the code:

gallery li {

width: 28.3333%

}

gallery li:nth-child(3n) {

clear: right;

}

That gives me 3 on larger screens, 2 on smaller screens.