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 Portfolio

Posted by Josh Clemence
Josh Clemence
864 Points

My images don't seem to scale as I adjust the browser's width? Am I doing something wrong my with CSS or HTML?

CSS:

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

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

wrapper{

width: 940px; margin: 0 auto; padding:0 5%; background: #ffffff; }

a { text-decoration: none; }

img{ max-width: 100%; }

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

logo{

text-align: center; margin: 0; }

h1{ font-family: 'Montserrat', sans-serif; font-weight:700; margin: 35px, 0; font-size: 3em; line-height: 0.8em; font-weight: 0.5em ; }

h2 { font-size: 1.5em; margin: -5px, 0 , 0 ; font-family: 'Montserrat' , sans-serif; font-weight:normal ; }

/* ************ NAVIGATION TEXT ************ */

nav{ text-align:center; padding: 10px , 0; margin:20px,0 , 0; }

/* ************ FOOTER TEXT ************ */

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: 35%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

footer { clear: both; }

/* ************ COLORS ************ */

/* Site body*/

body{ background-color: #fff; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background: #eee;}

/* logo text */ h1, h2 { color:#fff; }

/links/ a { color:#6ab47b;}

/* nav links*/ nav a, nav a:visited { color: #fff; }

/* selected nav links color */ nav a.selected, nav a:hover { color: #32673f; }

#navigation { list-style-type: none; }

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Josh Clemence | Video + Design</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700,300,800,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="CSS/main.css"> </head> <body> <header> <a href="index.html" id= "logo"> <h1>Josh Clemence</h1> <h2>Video + Design </h2> </a> <nav> <ul id="navigation"> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="about.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/Dumb Thing .png"> <img src="img/dumb thing.png" alt=""> <p>BoxCast Adverts</p> </a> </li> <li> <a href="img/Dumb Thing .png"> <img src="img/dumb thing.png" alt=""> <p>BoxCast Adverts</p> </a> </li> <li> <a href="img/Dumb Thing .png"> <img src="img/dumb thing.png" alt=""> <p>BoxCast Adverts</p> </a> </li>

            </ul>
         </section>
          <footer>
          <a href="https://www.linkedin.com/profile/view?id=162008769&trk=spm_pic"><img src="img/linked in.png" alt="linked in"></a>
            <p>&copy; 2014 Josh Clemence.</p>
            </footer>
            </div>
 </body>

</html>

THANKS FOR YOUR HELP!!!

9 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Okay, your biggest problems are typos in your CSS, and forgetting to use the # symbol when selecting elements by ID. I've gone ahead and fixed the errors I found and put some comments so you can see what I've changed.

Whitespace is your best friend when it comes to finding minor syntax mistakes. The easier your code is to read, the more likely you'll be able to identify problems.

Note that I had to change some image links in your HTML for testing purposes. You'll need to change those back to link to your own files, as I'm using dummy images from LoremPixel.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Josh Clemence | Video + Design</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700,300,800,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body> 
  <header>
    <a href="index.html" id="logo">
      <h1>Josh Clemence</h1>
      <h2>Video + Design</h2>
    </a>

    <nav>
      <ul id="navigation">
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="about.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <div id="wrapper">
    <section>
      <!-- I replaced your images here with some placeholders so I could test. -->
      <!-- Your image links had some spaces in them, which they can't have. Placeholder text, maybe? -->
      <ul id="gallery">
        <li>
          <a href="http://lorempixel.com/600/400">
            <img src="http://lorempixel.com/600/400" alt="">
            <p>BoxCast Adverts</p>
          </a>
        </li>
        <li>
          <a href="http://lorempixel.com/600/400">
            <img src="http://lorempixel.com/600/400" alt="">
            <p>BoxCast Adverts</p>
          </a>
        </li>
        <li>
          <a href="http://lorempixel.com/600/400">
            <img src="http://lorempixel.com/600/400" alt="">
            <p>BoxCast Adverts</p>
          </a>
        </li>
      </ul>
    </section>

    <footer>
      <a href="https://www.linkedin.com/profile/view?id=162008769&trk=spm_pic"><img src="http://lorempixel.com/24/24" alt="linked in"></a>
      <p>&copy; 2014 Josh Clemence.</p>
    </footer>
  </div>
</body>
</html>

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

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

/* Wrapper is an ID and you must use the # selector! */

#wrapper {
  width: 100%;
  /* 940px was set as 'width' so the width was staying static even when you resized the window. */
  max-width: 940px;  
  margin: 0 auto; 
  padding:0 5%; 
  background: #ffffff; }

a { text-decoration: none; }

img { max-width: 100%; }

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

/* Logo is an ID and you must use the # selector! */

#logo {
  text-align: center; 
  margin: 0; }

h1 { 
  font-family: 'Montserrat', sans-serif; 
  font-weight: 700; 
  margin: 35px 0; /* There was a comma here. */
  font-size: 3em; 
  line-height: 0.8em; 
  font-weight: 0.5em ; }

h2 { 
  font-size: 1.5em; 
  margin: -5px 0 0; /* There were some commas here. */
  font-family: 'Montserrat' , sans-serif; 
  font-weight: normal; }

/* ************ NAVIGATION TEXT ************ */

nav { 
  text-align: center; 
  padding: 10px 0; /* There was a comma here. */ 
  margin: 20px 0 0; /* There were some commas here. */ }

/* ************ FOOTER TEXT ************ */

footer { 
  font-size: 0.75em; 
  text-align: center; 
  padding-top: 50px; 
  color: #ccc; }

/* ************ PAGE PORTFOLIO ************ */

/* Gallery is an ID and you must use the # selector! */

#gallery {
  margin: 0; 
  padding: 0; 
  list-style: none; }

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

footer { clear: both; }

/* ************ COLORS ************ */

/* Site body*/

body { 
  background-color: #fff; 
  color: #999; }

/* green header */ 
header { 
  background: #6ab47b; 
  border-color: #599a68; }

/* nav background on mobile */ 
nav { background: #eee;}

/* logo text */ 
h1, 
h2 { color: #fff; }

/*links*/ 
a { color: #6ab47b; }

/* nav links */ 
nav a, 
nav a:visited { color: #fff; }

/* selected nav links color */ 
nav a.selected, 
nav a:hover { color: #32673f; }

/* You need to select the list items here. */
#navigation li { list-style-type: none; }
Josh Clemence
Josh Clemence
864 Points
Josh Clemence
Josh Clemence
864 Points

I've tried with both chrome and safari, so I also don't think its a browser issue.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

It's probably your CSS. It's...a bit of a nightmare to read. A little whitespace would go a long way. I'm not sure if it lost some formatting when you copy-pasted, but there are definitely some typos.

You've got some commas in some of your padding and margin styles that shouldn't be there. There's also at least one comment that isn't enclosed in comment syntax. Let me take a closer look and see if I can't find what's messing up your images.

Jonathan Söder
Jonathan Söder
7,428 Points
Jonathan Söder
Jonathan Söder
7,428 Points

That's what I thought too, but I tried copy pasting section by section and refresh to find the problem but it's still working on my end, chrome. (I used the class project files to replace with his code). I'd love to hear your finds!

Josh Clemence
Josh Clemence
864 Points
Josh Clemence
Josh Clemence
864 Points

Awesome thanks so much for your help! I'll make sure to start spacing that out better haha.

Josh Clemence
Josh Clemence
864 Points
Josh Clemence
Josh Clemence
864 Points

Ok great thanks for your help!!!!!

Josh Clemence
Josh Clemence
864 Points
Josh Clemence
Josh Clemence
864 Points

It still doesn't seem to fix the scaling issue (although I'm glad I got rid of the commas and spaced it out).

I've stared at it too long. Can't seem to figure out where the error is.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

In my workspace, the scaling issue was fixed once I added the '#' symbol to all the ID selectors. Did that not work for you?

Josh Clemence
Josh Clemence
864 Points
Josh Clemence
Josh Clemence
864 Points

No for some reason it didn't, I even went so far as to pasting your corrected code and it still doesn't, which tells me my workspace or browser may be acting up if were both using the same code and getting different results.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

I would try saving and closing out your workspace entirely. I'm pretty sure (85% sure?) that it should be working, at least in terms of scaling the images. Sorry it's causing you so much grief. :(

Josh Clemence
Josh Clemence
864 Points

Haha no worries, thank for your advice though. I will try again tomorrow and keep you posted.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Okay! One more edit made. Hopefully it works for you now. Changed 'width: 940px' to be 'max-width: 940px' so it should be dynamic now I hope.

Jonathan Söder
Jonathan Söder
7,428 Points
Jonathan Söder
Jonathan Söder
7,428 Points

Just a quick question, have you tried the same code in a "real doc" as opposed to trying it in the workspace? Both your original code AND the more tidy one works in my chrome when I create my own index.html and css and paste the code in those files. I never tried it in a workspace, I'll do that when I get home!

Update:

Using a clean workspace in chrome:

Original code: not working - image not resizing.

Clean code: not working - image not resizing.

Creating files on desktop opened with chrome:

original code: working

clean code: working

Not sure what's going on here but interesting nonetheless.

Edit: argh, what's going on with the linebreaks, I group my text into pretty sections! :=(

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

You're right. I had not tried it in workspace, I was using my own text editor.

The width of #wrapper was set at a static 940px, which was why it wasn't resizing (I think). Not sure why it worked in the editor, to be honest.

Josh Clemence
Josh Clemence
864 Points
Josh Clemence
Josh Clemence
864 Points

YES THAT WAS IT!!!!!! It had to be max-width. Thanks again for your help guys, this is going to turn into my real portfolio site so its very much appreciated.