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 trialThale van der Sluijs
1,756 PointsPictures 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
10,148 Pointshi 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
1,756 PointsHey 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?
Daniel Campbell
10,148 PointsDo 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
1,756 PointsHey Daniel Campbell,
- Sorry for the late response, I was bussy.
- 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: But this is my output: This is my site adress: http://port-80-pf9hlm8lxz.treehouse-app.com/Index.html I hope you can help! Thanks,
Daniel Campbell
10,148 PointsHi Thale, I'm not able to see your images or workspace. Can you paste your code into here?
Thale van der Sluijs
1,756 Pointssure: 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>© 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
1,756 PointsHey 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
10,148 PointsHi 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