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 Adding Pages to a Website Add Iconography

Stuart McPherson
Stuart McPherson
15,939 Points
Posted by Stuart McPherson
Stuart McPherson
15,939 Points

Why do my images not fill the grey panel?

On the main page, the grey panel you create that goes behind your images and contains the caption for the images. My images did fill it but now they don't fill it leaving space on the left side of the panel.

Any help would be appreciated!

Here's my css code:

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

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*****************************************************************************************************************
Header
*****************************************************************************************************************/

header {
  float:left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

header {
  background-color:#6ab47b; 
}


h1, h2 {
  color: #ffffff; 
}

h1 {
  font-family: 'Changa One', sans-serif; 
  margin: 15px 0; 
  font-size: 1.75em; 
  font-weight: normal; 
  line-height: 0.8em;
}

h2 {
  font-family: 'Changa One', sans-serif;
  margin: -5px 0 0; 
  font-size: 0.75em; 
  font-weight: normal; 
}

h3 {
 margin: 0 0 1em 0; 
}

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

/*****************************************************************************************************************
Body
*****************************************************************************************************************/

body {
  background-color: #ffffff; 
  color: #888888; 
}

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

/*****************************************************************************************************************
Navigation
*****************************************************************************************************************/

nav {
  background-color: #599a68; 
}

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

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


/*****************************************************************************************************************
Links
*****************************************************************************************************************/

a {
  color: #888888;
}

nav a, nav a:visited {
  color: #ffffff; 
}

nav a.selected, nav a:hover {
  color: #32673f; 
}

/*****************************************************************************************************************
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 li, a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 15px;
  margin: 0 0 10px;
}

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

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

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

Here's my html code:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Stuart McPherson | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <header>
      <a href="index.html" id="logo">
        <h1>Stuart McPherson</h1>
        <h2>Designer</h2>
      </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="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with colour and texture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using photoshop brushes</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repitition</p>
            </a>
          </li>
        </ul>
      </section>

      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Stuart McPherson</p>
      </footer>
    </div>

   </body>
</html>

5 Answers

derekverrilli
derekverrilli
8,841 Points
derekverrilli
derekverrilli
8,841 Points

Looks like this is the problem: 

#gallery, li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

Remove the comma after #gallery, remove the p selector and change padding: 0;

#gallery li a {
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  color: #bdc3c7;
}

Then add padding to the p element by itself:

#gallery p {
  padding-left: 5%;
}

Hope it helps!

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

Thank you, this sorted it!

If you wouldn't mind having a look at another issue i'm having that would be awesome https://teamtreehouse.com/forum/how-to-get-social-media-icons-horizontally-in-line

John Mutch
John Mutch
6,962 Points
John Mutch
John Mutch
6,962 Points

Hi Stuart,

I compared your code against mine. The material you gave all checks out. What I am not seeing is the affect your responsive.css is having on the gallery. I pulled mine and put it on your code and it seemed to work. Try comparing my code with your code in the responsive.css.

/**********************************
        PAGE: PROJECTS
        ***********************************/

        #gallery li { 
        width: 28.3333%;
        }

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

Hope this helps

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

My responsive seems to be working fine now, thankyou!

If you wouldn't mind having a look at another issue i'm having that would be awesome https://teamtreehouse.com/forum/how-to-get-social-media-icons-horizontally-in-line

derekverrilli
derekverrilli
8,841 Points
derekverrilli
derekverrilli
8,841 Points

After compiling all the code locally, it looks fine. The images are filling the gray background.

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

Thank you for looking into this!

When I preview my site. The grey panel extends to the left more than the image does so it looks like the image doesn't fill the grey panel's size.

So have you previewed my code in a workspace?

derekverrilli
derekverrilli
8,841 Points
derekverrilli
derekverrilli
8,841 Points

No, I copied everything onto my computer. Can you link to the workspace please?