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
Elizabeth Eymann
12,209 PointsProblem with putting up image in "About section" of website
Hello,
I am doing the "How to make a website" track. I am making the "About" page. In the "about.html" file, I successfully put up a photo of myself in this file.
Now, here is the problem: when I modify this photo in the "main.css" file, using the following code, the image disappears when I go to look at a preview of the About page! I don't know what I did wrong:
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
If I take this code out of "main.css" the image reappears.
5 Answers
benfarnham
17,073 PointsVery interesting... Honestly, everything looks sound. What browser are you using to preview your website?
If Firefox there is a note found within the teachers notes for the video that says:
Correction for Firefox
There's a bug in the CSS for this video that causes the profile picture to display incorrectly in Firefox. In order to correct the issue, the clear property with the value both needs to be applied to the .profile-photo class. Here's what the corrected code looks like:
.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
benfarnham
17,073 PointsNow I will say this is really difficult to answer while not being able to see your source code but from what it sounds like, I think your problem is your CSS isn't compiling right. Make sure you don't have additional style being applied to the 'profile-photo' after your newest styles being placed.
If this doesn't help, please link me some source code (copy and paste what code you have) and I will take a look. If you could link both HTML and CSS, I could really dig through it all!
Elizabeth Eymann
12,209 PointsHi Ben,
Thanks for the input. If you wouldn't mind taking a look at the code, I would really appreciate it! I am going to paste and copy the html code here, then I will post another message with the css code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Liz Eymann | Designer </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://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> Liz Eymann </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/liz.jpg" alt="Photograph of Liz Eymann" class="profile-photo"> <h3>About</h3> <p>Heloooo my name is Liz Eymann I'm learning how to make a website!</p> </section> <footer> <a href="http://facebook.com/lizeymann"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a> <p>Ā© 2015 Liz Eymann.</p> </footer> </div> </body> </html>
Elizabeth Eymann
12,209 PointsFor some reason I am unable to paste and copy the CSS code in this message, when I do, the formatting is strange and it doesn't make sense...here is a snapshot instead. The file is called "main.css".
Elizabeth Eymann
12,209 PointsI applied the corrected code and problem solved! Thanks so much! Now I know I should always take a look at the teacher's notes.
benfarnham
17,073 PointsSo glad you were able to get it to work! Have fun making the rest of your website! :)