Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

troy beckett
troy beckett
12,035 Points

img/nick.jpg coming up on screen larger then video example.

so here is my html and css code. please could you check below and maybe explain why the image of nick pettit(img/nick.jpg) on the page about.html is coming up massive on my screen when the video example is a lot smaller(I have copied the exact code shown). Thanks for your help in advance

html code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Juan Mata | Footballer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Juan Mata</h1>
        <h2>Footballer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" >Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/nick.jpg" alt=" Photograph of Nick Petit" class="profile-photo">
        <h3>About</h3>
        <p>Hi this my name is</p>
        <p> If you like to follow me on twitter then<a href="">@juanmata8</a></p>

      </section>
      <footer>
        <a href="http://twitter.com/juanmata8"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
        <p>&copy; 2014 Juan Mata</p>
      </footer>
    </div>
  </body>
</html>

Css code

/*******************************************************
GENERAL
********************************************************/
body{
  font-family: 'Open Sans', sans-serif;
}
a {
  text-decoration: none;
}

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

img{
  max-width:100%
}

/*******************************************************
HEADINGS
********************************************************/

header{
  float:left;
  margin: 0 0 30pxx 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#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;
  margin: 20px 0 0;
}

nav ul{
  list-style:none;
  margin:0 10px;
  padding:0;
}

nav li{
display:inline-block;
}

nav a {
  font-weight: 800;
  padding:15px 10px
}

/*******************************************************
FOOTER
********************************************************/

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

.social-icon{
  width:20px;
  height:20px;
  margin: 0 5px;
}



/*******************************************************
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: 0;
  font-size: 0.75em;
  color: #bdc3c7; 
}

/*******************************************************
PAGE ABOUT
********************************************************/

.profile-photo{
  display:block;
  max-width;150px;
  margin:0 auto 30px;
  border-radius:100%
}





/*******************************************************
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 a, nav a:visited{
  color: #fff;
}

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

3 Answers

You wrote max-width;150px; instead of max-width:150px;

Julia Whetten
Julia Whetten
5,977 Points

In your CSS, you also forgot to close your img in the General Section AND Page About.

img{ max-width:100% }

don't forget to use a semicolon ' ; '

Check all your CSS code for missing semicolons.

troy beckett
troy beckett
12,035 Points

Thanks for your answers it really helped, I understand now where I need to be looking when I get problems. Thanks for your time its really appreciated.