Once I add CSS styling, profile picture no longer shows up on About page at all, as it previously did.

Question

Before I added the CSS, the profile photo showed up on the About page. As soon as I added the CSS styling and went to preview the page, the photo isn't even there (it's supposed to be there, smaller, and in a circle). I cannot figure out why.
Here is the HTML from about.html

<section> <img src="img/nick.jpg" alt="photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi! I'm Bethany Miller. I'm a mom.</p> <p>If you'd like to follow me on twitter, my user name is <a href="http://twitter.com">@nickrp.</a></p> </section>

Here is the CSS styling from main.css

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

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

Answer 1 · 2015-08-07T18:49:04Z

August 7, 2015 6:49pm

Hi everyone,

I had the same problem when I did this course. The image did not display correctly when previewing it in FireFox only. To fix this you have to use the "clear" property with the value "both" in the "profile-photo" class.

So your css code should look like this:

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

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

This will fix the profile picture issue.

Answer 2 · 2015-08-06T18:42:18Z

August 6, 2015 6:42pm

It seems like you don't have an opening section tag in you HTML and that might be throwing off the interpreter. Try this:

 <section>
  <img src="img/nick.jpg" alt="photograph of Nick Pettit" class="profile-photo">
    <h3>About</h3>
    <p>Hi!  I'm Bethany Miller.  I'm a mom.</p>
    <p>If you'd like to follow me on twitter, my user name is <a href="http://twitter.com">@nickrp.</a></p>
  </section>

Answer 3 · 2015-08-06T19:16:02Z

August 6, 2015 7:16pm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bethany Miller | Mom</title>
     <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Advent+Pro|Sunshiney' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Bethany Miller</h1>
        <h2>Mom</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!  I'm Bethany Miller.  I'm a mom.</p>
        <p>If you'd like to follow me on twitter, my user name is <a href="http://twitter.com">@nickrp.</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>&copy; 2015 Bethany Miller</p>
      </footer>
   </div>
  </body>
</html>

/*******************
GENERAL
*******************/

body {
  font-family: 'Sunshiney', cursive;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}




/*******************
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: 'Advent Pro', sans-serif;
  margin: 15px 0px;
  font-size: 1.75em;
}

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%;
}

/*******************
PAGE: CONTACT
*******************/  

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a{
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}
.contact-info li.phone a {
  background-image: url('../img/phone.png)
}

.contact-info li.mail a {
  background-image: url('../img/mail.png)
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png)
}



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

Answer 4 · 2015-08-06T19:40:13Z

August 6, 2015 7:40pm

Looks like there's nothing wrong with your code. Are you getting alternate text instead of the photo? "photograph of Nick Pettit"

Answer 5 · 2015-08-06T22:41:40Z

August 6, 2015 10:41pm

i'm having the same issue. when i delete the .profile-photo css code the image reappears. when i put it back it disappears again. i tried deleting the display: block code only and the image shows up again, this time it's much smaller. i can't tell if it's a circle though because the image background is also white but at least it shows up.

tl:dr it seems to be an issue with the display: block code. not sure how to proceed.

edit: i left the display: block; code in and added clear: both; to the css right above it and that seems to have fixed the issue. i'm not sure why i would have to add that in to make it work.

Answer 6 · 2015-08-07T13:55:13Z

August 7, 2015 1:55pm

I'm having the same issue. I used FireFox for browsing and tried if it would work in IE and it did! What browser you guys are using? Could this be browser specific problem?

Answer 7 · 2015-08-18T07:02:16Z

August 18, 2015 7:02am

I am using Firefox, mine works properly with and without "clear: both;" added to main.css. My first thought this is not a Firefox issue but probably an error some where in the script. Earlier I had accidentally entered a colon instead of a semi-colon with strange results but was very easy to miss the error when I reviewed the code. Unfortunately the online code editor seems to have minimal error checking.

Welcome to the Treehouse Community

Looking to learn something new?

Bethany Miller

Bethany Miller

Once I add CSS styling, profile picture no longer shows up on About page at all, as it previously did.

7 Answers

Hector Castillo

Hector Castillo

Anna-Maria Kähkönen

Anna-Maria Kähkönen

Hector Castillo

Hector Castillo

Claudio Reyes

Claudio Reyes

Jesse Zelaya

Jesse Zelaya

Bethany Miller

Bethany Miller

Jesse Zelaya

Jesse Zelaya

Bethany Miller

Bethany Miller

Jesse Zelaya

Jesse Zelaya

Bethany Miller

Bethany Miller

Hector Castillo

Hector Castillo

cory german

cory german

Anna-Maria Kähkönen

Anna-Maria Kähkönen

davekemper

davekemper