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 Adding Pages to a Website Style New Pages

Jeremy Dawson
Jeremy Dawson
1,968 Points
Posted by Jeremy Dawson
Jeremy Dawson
1,968 Points

Photo Still Square

Hi Everyone

I cannot seem to get the image to go round. I am using Safari, I have tried chrome and I have also tried us using the firefox fix just in case.

Here is my About html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jeremy Dawson | 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"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jeremy Dawson</h1> <h2>Designer</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/jeremy2.jpg" alt="Photograph of Jeremy Dawson" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Jeremy Dawson. This is my design portfolio where I share all of my work. This is my first website, designed with the help of 'teamtreehouse.com'. When I'm not designing websites, I enjoy flying and spending time with my wife.</p> <p>If you would like to follow my company on Twitter, my username is <a href="http://twitter.com/atplfinance">@atplfinance</a>.</p> </section> <footer> <a href="http://twitter.com/atplfinance"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com.com/atplfinance"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2015 Jeremy Dawson</p> </footer> </div> </body> </html>

Here is my main.css:

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

header {
  float:left;
  margin: 0 0 30px 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: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



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

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

/*************************
Colours
*************************/

/* 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;
}

Any help us much appreciated.

2 Answers

Lindsay Sauer
Lindsay Sauer
12,029 Points

Hi Jeremy,

The issue is with the CSS: you have a colon after your class name:

 .profile-photo: {     // Remove this colon
Jeremy Dawson
Jeremy Dawson
1,968 Points
Jeremy Dawson
Jeremy Dawson
1,968 Points

Thank you so much! I've still not mastered spotting these small errors!

Lindsay Sauer
Lindsay Sauer
12,029 Points
Lindsay Sauer
Lindsay Sauer
12,029 Points

No problem! One thing that really helps me is using the developer console (F12). Then you can examine the element that has problems and it will give you an idea of why the CSS isn't working, like telling you if the property's being overwritten by another, or if it's not being applied to the element at all which tells you that the selector is likely the problem

Jeremy Dawson
Jeremy Dawson
1,968 Points
Jeremy Dawson
Jeremy Dawson
1,968 Points

That's really helpful, my image isn't quite round at 100%, I'm sure I read a reason for this on someone else's question. I quite like the shape so may keep it.