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!

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

General Discussion

troy beckett
troy beckett
12,035 Points
Posted by 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

Pedro Cabral
seal-mask
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points
Pedro Cabral
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points

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

Julia Whetten
Julia Whetten
5,977 Points
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
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.