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

Beth Lozada
Beth Lozada
1,728 Points
Posted by Beth Lozada
Beth Lozada
1,728 Points

My images are not shrinking like the videos: http://port-80-wfz6f0h51n.treehouse-app.com/ Can someone take a look?

I followed a long but I can't seem to find where I went wrong with the code to shrink the images:

http://port-80-wfz6f0h51n.treehouse-app.com/

Can someone take a look?

Bryan Fondrick
Bryan Fondrick
15,407 Points

I think you are missing the link to the responsive.css file in the head section of your .html file.

Rich Bagley
Rich Bagley
25,869 Points

Hi Beth,

The link doesn't appear to work I'm afraid. Can you try posting your code or this please?

Thanks

-Rich

Erik Jonsberg
Erik Jonsberg
21,795 Points
Erik Jonsberg
Erik Jonsberg
21,795 Points

Please post your code. It's not possible to view a workspace.

In general, for an image to be responsive, you need to set its width to a percentage in your css.

Beth Lozada
Beth Lozada
1,728 Points
Beth Lozada
Beth Lozada
1,728 Points 
/***********************************************
GENERAL
***********************************************/

body {
  font-family: 'Open Sans', sans-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;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin:15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: 5px 0 0;
  font-weight: normal;
}

/***********************************************
NAVIGATION
***********************************************/


nav {
  text-align: center;
  padding: 10px 0;
  font-weight: 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
***********************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}
/* nav background on mobile*/
nav {
 background: #599a68; 
}
/* logo text */
h1, h2 {
  color: #fff;
}
 /* links */
 a {
  color: #6ab47b; 
}

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
<header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</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>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 80s 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 repetition.</p>
            </a>
        </li>
       </ul>

    <p>Gallery will go here.</p>
  </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; 2014 Nick Pettit.</p>
  </footer>
    </div>
Chyno Deluxe
Chyno Deluxe
16,936 Points

Hey Beth, can you provide a Snapshot of your workspace instead please.

2 Answers

Bryan Fondrick
Bryan Fondrick
15,407 Points

Beth,

If you have covered responsive design layout, check to see if you have a responsive.css file in the css folder in your workspace. If you do, put the following in your head section of your html file, make sure they are the last lines before /head:

<link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

I copied your html when it was available before and was able to get the layout effect you are missing when I linked to the copy of responsive.css I had on my hard drive.

Another thing, I noticed was that you didn't close the body or html with /body and /html closing tags. It had nothing to do with your problem, it's just good mark up to close your tags.

I'm sorry for not being completely clear the first time I offered my solution. Best of luck,

Bryan

Beth Lozada
Beth Lozada
1,728 Points
Beth Lozada
Beth Lozada
1,728 Points

Thank you! I think I got it now. It's working. I appreciate everyone's help! :)