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

Posted by Gabby Coggin
Gabby Coggin
2,936 Points

Code does not resize into two columns?

My code does not resize or adjust the given images at all. Please advise. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Gabby Coggin | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
    <link rel="stylesheet"  href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
          <h1>Gabby Coggin</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 color and texture.</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Experimentation with color and texture.</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 Gabby Coggin.</p>
      </footer>
      </div>
  </body>
</html>

/******************** GENERAL ********************/

body { font-family: 'Slabo 27px', serif; }

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

/**************** HEADING ****************/

logo {

text-align: center; margin: 0; } /make sure to close all your brackets are really dumb stuff happens like h1 not even being recognized, "dummy"/

h1 { font-family: 'Slabo 27px', serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em; margin: -5px 0 0; /*Left/right (neg. makes it tighter) Top Bottom */ font-weight: normal; }

/********* NAVAIGTATION ***********/

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: PORTFOLIO ********************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

} /***************** COLORS ******************/

/nav abckground on mobile devices/ body{ background-color: #fff; color: #999; }

/* greeen header*/ header { background: #00CCCC; border-color:#66CCFF; }

/nav background on mobile devices/ nav { background: #00CCCC; }

h1, h2 { color: #fff; }

a { color: #0066CC; }

/nav link/ nav a, nav a:visited { color: #fff; } /selected nav link/ nav a.selected, nav a:hover { color: #505050; }

1 Answer

Matt Brock
Matt Brock
28,330 Points
Matt Brock
Matt Brock
28,330 Points

Could you try to reformat your code in the post? Check out the Markdown Cheatsheet to see how.

It appears you're not using the proper selectors in your CSS. You're declaring logo { // code} and other selectors which seem to be classes you're using in your html, but you need the correct syntax for the code to work. Did you post your entire html file?