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

Posted by Kevin Halliwell
Kevin Halliwell
Courses Plus Student 1,060 Points

I am working on the "How to make a website" track, and my pictures are not resizing properly.

I have looked over the code, and I can not find anything wrong with it. I will say I am pretty new to HTML/CSS though.

6 Answers

Jovanny Elias
Jovanny Elias
16,204 Points

What is exactly happening to your image? Is it not resizing at all? Is the background resizing properly but your image is partially showing or is the image spilling outside your background? It's been a while since I have seen this tutorial and I don't remember which technique they use but if your image is not staying inside your background which is your li. Then try adding this to your css 

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

When adding responsive images their aspect ratio is kept and to insure the full image is kept in ratio and inside your container the max-width will make sure that it gets no bigger than the size of its container. This prevents the image from overflowing or being to big or small for its container. Let me know if it works or not

Jovanny Elias
Jovanny Elias
16,204 Points
Jovanny Elias
Jovanny Elias
16,204 Points

Can you post your code here. If you are new to posting code you should watch the tips for asking questions video at the bottom of this forum page also take a look at the link markdown cheer sheet. It will show you how to post code as well

Kevin Halliwell
PLUS
Kevin Halliwell
Courses Plus Student 1,060 Points
Kevin Halliwell
Kevin Halliwell
Courses Plus Student 1,060 Points 
#gallery{
  margin: 0;
  padding: 0;
  list-style: none;
}

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

#gallery li a p{
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
  background-color: #f5f5f5;
}
Kevin Halliwell
PLUS
Kevin Halliwell
Courses Plus Student 1,060 Points
Kevin Halliwell
Kevin Halliwell
Courses Plus Student 1,060 Points 
 <ul id ="gallery">
          <li>
            <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with color 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>80's style.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>The number 12.</p>
            </a>
          </li>
        </ul>
Kevin Halliwell
PLUS
Kevin Halliwell
Courses Plus Student 1,060 Points
Kevin Halliwell
Kevin Halliwell
Courses Plus Student 1,060 Points

They are not re-sizing to look like thumbnail pictures. They still take up most of the screen. It acts as if the image is overflowing the container in both width and height.

body{
  font-family: 'Armata', sans-srif;
}

a{
  text-decoration:none; /*removes underline on links */
}

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

#gallery img{
  max-width=100%;
  height: auto;
}
Kevin Halliwell
PLUS
Kevin Halliwell
Courses Plus Student 1,060 Points
Kevin Halliwell
Kevin Halliwell
Courses Plus Student 1,060 Points

I see the problem now....

I have max-width=100%;

and it should be max-width: 100%;

Thanks for your help. My C++ experience was getting in the way!