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
McCartney Kellam
748 PointsAbout section image not appearing during "Adding Pages to a Website" course.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mac Kellam | Voice Actor</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Mac Kellam</h1>
<h2>Voice Actor</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/mac.jpg" alt="Photograph of Mac Kellam" class="profile-photo">
<h3>About</h3>
<p>Hi, I am Mac Kellam. This is my test website on Treehouse. I'm aspiring to become a busy voice actor. Coffee is my fuel.</p>
<p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/mackellam">@MacKellam</a>.</p>
</section>
<footer>
<a href="http://twitter.com/mackellam"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/mackellam"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Mac Kellam.</p>
</footer>
</div>
</body>
</html>
/********************
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: 100%;
}
/********************
COLORS
********************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices */
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;
}
This is the code that I have up until this point. I'm pretty sure I have not overlooked anything. I've checked the code several times, yet my About section profile image is not displaying. When I used Nick's picture, it displayed, but would not conform to the border-radius edits. When I simply swapped his with mine, in the exact same location, it doesn't show at all. I'm stuck. Thanks for any help!
McCartney Kellam
748 PointsGave that a try with no luck, unfortunately. Thanks though!
Sachin Utkar
1,789 Pointshey have u check your image format. and if so, then try opening in other browser.
3 Answers
Nick Pettit
Treehouse TeacherHey McCartney,
This is a tricky one. I'm able to reproduce the problem, but I'll need the rest of the project to figure out it. I just sent you an email.
All the best, Nick
Gregory Radek
869 PointsHi,
I'm not sure how computer literate you are or not so forgive me if what I say seems obvious.
1 - First thing, what size and format image are you using? Where has the image come from? You want to make sure that it is definitely a jpg like stated in the code that you have written. I tend to export my web images from photoshop using the 'save for web and devices' option. If you have a psd for example and simply change the extension of the file from .psd to .jpg then it is likely to cause problems.
2 - Have you definitely uploaded the image and placed it in the img folder in workspaces? This is a more common mistake in web design than you'd think.
3 - One of the most common reasons for a link not working in my experience is misspelling something. Double check that the spelling of your file and your code is correct and that they match. Files can also be case sensitive and it is advised to not use upper case lettering within your HTML.
4 - it could simply be a caching issue with your browser. Trying clearing the cache and history and then viewing it again.
I hope these pointers help. If they don't then let us know and I'll see if I can offer any more help :)
McCartney Kellam
748 PointsThanks for the detailed response, I appreciate it. I know my way around a computer pretty well, so I've checked everything you listed. I too think it's a caching problem. I cleared it once before, but that didn't do the trick.
Something of note that I've tried is changing the class of "profile-photo" to "profile-photo.jpg", and then changing it in the CSS as well, which causes the image to appear. However, it's not conforming to any of the specifications. It's just the regular image. When removing the .jpg extensions, the image doesn't appear at all again.
McCartney Kellam
748 PointsWith a little spelunking from Nick, it was discovered that it was a bug in Firefox that can plague some users. Interestingly enough, it didn't work in Chrome before, but after a while, it did. To get the image to display properly in Firefox, a slight change in the code is necessary, which is below:
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Works like a charm. Thanks for your help, everyone! Maybe this post will come in handy for someone else that may run into the same bug. :)
Jonathan Romine
9,344 PointsJonathan Romine
9,344 Pointstry adding to the image class,
width: 100%; max-width:150px; height:auto;