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 trialJeremy Dawson
1,968 PointsPhoto 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
12,029 PointsHi Jeremy,
The issue is with the CSS: you have a colon after your class name:
.profile-photo: { // Remove this colon
Lindsay Sauer
12,029 PointsNo 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
1,968 PointsThat'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.
Jeremy Dawson
1,968 PointsJeremy Dawson
1,968 PointsThank you so much! I've still not mastered spotting these small errors!