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 trialStuart McPherson
15,939 PointsMy site's columns with the images don't scale with the size of the browser. Any ideas why not?
Any help would be appreciated.
Here's my code:
index.html:
<!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"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Stuart McPherson</p>
</footer>
</div>
</body> </html>
Main.css:
/************************************************************************************ GENERAL ************************************************************************************/
wrapper {
width: 940px; margin: 0 auto; padding: 0 8%; }
a { text-decoration: none; }
img { max-width: 100%; } /************************************************************************************ Header ************************************************************************************/
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; }
logo { /* Links in the header are centred*/
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; }
/************************************************************************************ Footer ************************************************************************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #cccccc; }
/************************************************************************************ 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; }
2 Answers
Maude Theberge
7,755 PointsInstead of width, try to use max-width property for your wrapper Id.
Ben Singer
8,621 PointsJust off the bat, you've not included any ID or Class selector characters ( # and . ) at the beginning of your css selectors.
Specifically though, to make images scale you have to set the following:
img {
max-width:100;
height:auto;
}
Stuart McPherson
15,939 PointsI have put ID and class selectors in it's just not displaying them. I can see I have when I edit it but it doesn't seem to display it when I save the changes. :/
That doesn't seem to do anything for me but thanks. It scales down to about tablet size landscape but when I go into mobile view it cuts off the 2nd column and the images in there
Stuart McPherson
15,939 PointsStuart McPherson
15,939 PointsThank you this worked! :D