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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Stuart McPherson
Stuart McPherson
15,939 Points
Posted by Stuart McPherson
Stuart McPherson
15,939 Points

My 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>&copy; 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
Maude Theberge
7,755 Points
Maude Theberge
Maude Theberge
7,755 Points

Instead of width, try to use max-width property for your wrapper Id.

Ben Singer
Ben Singer
8,621 Points
Ben Singer
Ben Singer
8,621 Points

Just 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
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

I 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