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
Chadwick Garner
602 PointsMy About page profile photo has disappeared.
When i view my about page my profile photo has disappeared. This happened when i started to do css for the about page. I think it may be to do with the display: block;.
About page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chad Garner | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,900|Ubuntu:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Chadwick Garner</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
<h3>About</h3>
<p>Hi, Im Chad Garner. This is my portfolio of all my designs and creations. I like to exercise, play video games and learn.</p>
<p>If you'd like to follow me on twitter then my profile is <a href="http://twiiter.com">@Chad</a>.</p>
</section>
<footer>
<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Chadwick Garner.</p>
</footer>
</div>
</body>
</html>
CSS:
/**************
GENERAL
**************/
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
body {
font-family: 'Ubuntu', sans-serif;
}
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;
}
nav {
background: #599a68;
}
header {
background: #6ab47b;
border: #599a68;
}
h1 {
font-family: 'Roboto', san-serif;
margin: 15px 0;
font-size: 1.75em;
line-height: 0.8em;
font-weight: normal;
}
h2 {
font-size: 0.75em;
font-weight: normal;
margin: -5px 0 0;
}
/**************
NAVAGATION
**************/
nav {
text-align: center;
margin: 20px 0 0;
padding: 10px 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 {
text-align: center;
clear: both;
padding-top: 50px;
font-size: 0.75em;
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;
}
/**************
PAGE ABOUT
**************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30;
border-radius: 100%;
}
/****************
COLOURS
****************/
a {
color: #6ab47b;
}
h1,h2 {
color: #fff;
}
nav a, nav a:visited {
color: #fff;
}
nav a.selected, nav a:hover {
color: #32673f
}
body {
background-color: #fff;
color: #999;
}
4 Answers
Chadwick Garner
602 PointsI have fixed the problem. I'm using mozilla firefox as my browser and the latest version makes the display: block; remove the picture. in order to fix this problem i have had to add clear: both; to my css. This fixed the problem.
.profile-photo { display: block; clear: both; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Christian Andersson
8,712 PointsThis might be the issue: you have a couple of lines in your CSS that are not ending with semi-colon ( ; ).
the color in #gallery li and in nav a.selected, nav a:hover are missing the semi-colon.
Try that.
Adolf Roman
3,758 Pointsactually I think its because of the display:block.... that happened to me as well, my img was not showing and then something happened.... just tested the kid's code and it seems to be fine
close it, save ur stuff and reopen your page...
display:block centers the img right?
Chadwick Garner
602 Points@ christian Hi i have added the semi-colons but i still seem to have the same problem. @adolf Yes the display block centers the image. I have looked in my about css and i cant see any letters missing :/.
Adolf Roman
3,758 PointsGot it! Double check ur code buddy, u r missing 2 letters in there... somewhere... :P in the about css....
Alan Dubinsky
1,286 PointsJust an aside, you have a "twiiter" in one of your About paragraphs.
Chadwick Garner
602 PointsHi, The twiitter is supposed to be there, was part of the course to add it into my paragraph. Thanks anyway.
Alexandre Cruzeiro
529 PointsAlexandre Cruzeiro
529 PointsHey, thanks! This worked for me too!