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

Posted by Thomas Wilhelm
Thomas Wilhelm
3,714 Points

Style the Portfolio, Floating Images Issue

I can't get the images to scale with the window: I've read some similar questions, but I can't locate the issue. My img max-width is 100%. I think the gallery is id'd and selected correctly. Here's my CSS up to colors:

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

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

#wrapper {
    width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration:none;
    color: #6ab47b;
}

img {
    max-width: 100%;
}



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

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

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

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}



/***************
NAVIGATION
***************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}



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

footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color: #ccc;
}



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

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

3 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hi Thomas,

It looks like you have the incorrect property on the #wrapper. Instead of width it should be max-width,

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}
Thomas Wilhelm
Thomas Wilhelm
3,714 Points
Thomas Wilhelm
Thomas Wilhelm
3,714 Points

And HTML for good measure: 

 <section>

          <ul id="gallery">  
            <li>
              <a href="img/2013StarJedi.jpg">
                <img src="img/2013StarJedi.jpg" alt="">
                <p>A birthday invitation I made for a friend</p>
              </a>
            </li>
            <li>
              <a href="img/Banner.jpg">
                <img src="img/Banner.jpg" alt="">
                <p>Sketching in Photoshop</p>
              </a>
            </li>
            <li>
              <a href="img/Imp.jpg">
                <img src="img/Imp.jpg" alt="">
                <p>Painting in Photoshop</p>
              </a>
            </li>
            <li>
              <a href="img/Knight-Chess-Piece.jpg">
                <img src="img/Knight-Chess-Piece.jpg" alt="">
                <p>A project I did for school</p>
              </a>
            </li>
            <li>
              <a href="img/Exotic_Flower.jpg">
                <img src="img/Exotic_Flower.jpg" alt="">
                <p>Playing with mediums</p>
              </a>
            </li>
          </ul>
Thomas Wilhelm
Thomas Wilhelm
3,714 Points
Thomas Wilhelm
Thomas Wilhelm
3,714 Points

That did it! Thanks. But I thought Nick said 'width' and 'max-width' was the same thing? What does width specify then?

Dustin Matlock
Dustin Matlock
33,856 Points

Here's a detailed answer on the difference between width and max-width.

Seth McCombs
Seth McCombs
16,767 Points
Seth McCombs
Seth McCombs
16,767 Points

Hey Thomas! There's an awesome forum post here that breaks down width vs max-width! Hope this helps!

Thomas Wilhelm
Thomas Wilhelm
3,714 Points

Thanks guys! I think I got it. So my understanding is that Max-Width is a 'less than or equal to' sign. And Width is an 'equal' sign. That makes sense.

Thanks again.