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 Styling Web Pages and Navigation Style the Portfolio

Thale van der Sluijs
Thale van der Sluijs
1,756 Points
Posted by Thale van der Sluijs
Thale van der Sluijs
1,756 Points

Pictures not scaling

So I was just following the video. (some things I changed, but I don't think that's the problem) But the pictures just take the half of their form. This is my code: https://w.trhou.se/2509stwquc

Can someone help me?

Thanks, Thale van der Sluijs

7 Answers

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

hi Thale,

If you use Chrome Dev Tools you can select the image and see which CSS properties are being applied to it.

You added the ID '#gallery' to the first <li> which contains the image being modified.

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

}

The property of 'width:45%; ' is forcing the image to fit the allocated space.

Remove the width property (or set it to 100%) from #gallery li in the CSS or remove the ID <ul id="gallery"> from the HTML and it will display like the other images below.

Like this :

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

}

or in the HTML

<ul>
 <li>
  <a href="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_rP0kQjJ.jpg">
   <img id="Purple Bridge" src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_rP0kQjJ.jpg" alt="Purple Bridge" height="768" width="1024">
   <p>Purple Bridge</p>
  </a>
 </li>
</ul>
Thale van der Sluijs
Thale van der Sluijs
1,756 Points
Thale van der Sluijs
Thale van der Sluijs
1,756 Points

Hey Daniel Campbell,

Is there not a way to get the pictures scaled like in the video? Because when I try your tip, It just stays the same as it was. Do you know how?

Thale van der Sluijs

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

Do you mean that the images are responsive relative to the size of the browser window?

You could set the size of the container to a relative size (%, rem, or vw) and then have the images fill that container so when the container changes size, the images fill itl.

Here is the principle:

#container {
  width: 90%;
  max-width: 1100px;
}

img {
  max-width: 100%;
}

Your images should be at least 1100px wide in this case. If the container is smaller than 1100px the images will fill the width of the available area.

There are other factors involved such as borders and padding and floats but this is the basic principle to play around with.

Hope that helps.

Thale van der Sluijs
Thale van der Sluijs
1,756 Points
Thale van der Sluijs
Thale van der Sluijs
1,756 Points

Hey Daniel Campbell,

  1. Sorry for the late response, I was bussy.
  2. In the video the pictures fit in the size of the screen. (you just gave the code to me.) But I want like in the video that I have a 2 column layout, but that just doesn't work with my code (video 'Style the portfolio' time: 5:37. Like this: video IMG But this is my output: video IMG This is my site adress: http://port-80-pf9hlm8lxz.treehouse-app.com/Index.html I hope you can help! Thanks,

Thale van der Sluijs

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

Hi Thale, I'm not able to see your images or workspace. Can you paste your code into here?

Thale van der Sluijs
Thale van der Sluijs
1,756 Points
Thale van der Sluijs
Thale van der Sluijs
1,756 Points

sure: This are the images: I want it like this: http://port-80-pf9hlm8lxz.treehouse-app.com/voor%20community/Knipsel.PNG But my output is this: http://port-80-pf9hlm8lxz.treehouse-app.com/voor%20community/Knipsel%202.PNG This is the index.HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WallpaperWalz | Wallpapers</title>
    <link rel="shortcut icon" href="img/M.ico"/>
  <link rel="stylesheet" href="css/normalize.css">
  <link href="https://fonts.googleapis.com/css?family=Coiny|Open+Sans:400,400i,700,800" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <a href="Index.html" id="Logo">
      <h1>WallPaperWallz</h1>
      <h2>Wallpapers</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="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_rP0kQjJ.jpg">
           <img src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_rP0kQjJ.jpg" alt="Purple Bridge" height="768" width="1024">
           <p>Purple Bridge</p>
          </a>
           </li>
           <li>
          <a href="http://www.wallpapereast.com/static/images/france-wallpaper-25957-26641-hd-wallpapers_gtQJClp.jpg">
           <img src="http://www.wallpapereast.com/static/images/france-wallpaper-25957-26641-hd-wallpapers_gtQJClp.jpg" alt="Eiffeltower" height="768" width="1024">
           <p>Eiffeltower</p>
          </a>
           </li>
         <li>
          <a href="img/Wallpaper-HD-1.jpg">
           <img src="img/Wallpaper-HD-1.jpg" alt="Tiger" height="768" width="1024">
           <p>Tiger</p>
          </a>
           </li>
         <li>
          <a href="http://www.wallpapereast.com/static/images/france-wallpaper-25957-26641-hd-wallpapers_gtQJClp.jpg">
           <img src="http://www.wallpapereast.com/static/images/france-wallpaper-25957-26641-hd-wallpapers_gtQJClp.jpg" alt="Eiffeltower" height="768" width="1024">
           <p>Eiffeltower</p>
          </a>
           </li>
         <li>
          <a href="http://www.wallpapereast.com/static/images/france-wallpaper-25957-26641-hd-wallpapers_gtQJClp.jpg">
           <img src="http://www.wallpapereast.com/static/images/france-wallpaper-25957-26641-hd-wallpapers_gtQJClp.jpg" alt="Eiffeltower" height="768" width="1024">
           <p>Eiffeltower</p>
          </a>
           </li>
         </ul>
        </section>
        <footer>
         <a href="https://www.facebook.com/kees.jansma.5477"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
           <a href="https://www.instagram.com/thale_vd_sluijs"><img src="http://www.fizzixproductions.com/Social/instagram.png" alt="Instagram Logo" height="60" width="60"></a>
          <a href="https://twitter.com/thale_vd_sluijs"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
          <p>&copy; 2016 Thale van der Sluijs.</p>
        </footer>
        </div>
  </body>





</html>

This is my CSS:

/*****************************
General
*****************************/

a {
 text-decoration:none; 
}
img{
 max-width:100%; 
}

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

#Logo{
 text-align:center;
  margin: 0;


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

/*****************************
Heading
*****************************/
h1{
 font-family: 'Coiny', sans-serif;
  margin:15px 0;
}

/*****************************
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: Home
*****************************/
#gallery{
 margin:0;
 padding:0;
 list-style: none;
}
#gallery li{
  float:left;
  margin:2.5%;
  background-color:#f5f5f5;
  color:#bdc3c7

}
#container {
  width: 90%;
  max-width: 1100px;
}

img {
  max-width: 100%;
}


/*****************************
Colors
*****************************/
a{
  color:#6ab47b;
}
header{
  background:#6ab47b;
}
h1,h2{
 color:#fff 
}
nav{
background:#599a68
}
nav a, nav a:visited{
  color: white
}
nav a.selected, nav a:hover {
  color: #32673f
}
/*site body*/
body{
 background-color: white;
 color:#999

}
Thale van der Sluijs
Thale van der Sluijs
1,756 Points
Thale van der Sluijs
Thale van der Sluijs
1,756 Points

Hey Daniel Campbell,

I found the error! The width of 45% didn't work because i set all my pictures to height="768" width="1024" That just blocked it. I am using photoshop now to resize everything.

Still, thanks for the help! Thale van der Sluijs

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

Hi Thale,

Good to hear you found a solution. You can leave the images the same size and just remove the width and height properties and they will fill the allocated space.

Best, Daniel