portfolio project: stage 7 - Adding pages to a Website

Are you refreshing the page because your css is correct

Yes, several times in fact.

Is the photo inside of another div and does that div have a width? That way the photo has a reference in order to center.

In your about.html does your code look like this?

<section>
       <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Your paragraph</p>
      </section>

Make sure your closing tags are right and that you put your code in between <section> </section> elements Comment below what I said if you continue to have an error and I will try to further help you.

According to my HTML It's in the same Div as all these other elements which i have been able to position with no problems. Should I create a Div just for the image? All this content is on the about page, here is the html. The image in question is nick.jpg. Thanks for the help!

<div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffe, and more.</p> <p>If you'd like to follow me on Twitter, my username is <a href ="http://twitter.com/nickrp">@nickrp</a>.</p> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nick Pettit.</p> </footer> </div>

Nick Pettit

Hey Nick, sorry to bother you with this but I haven't been able to get a resolution for this and I'm desperate to figure it out. I'm wrapping up your HTML lesson on The Portfolio Project which I found to be very informative, however I can't figure out why your image isn't centering on the about page. According to the HTML it all seems to be in the same DIV. Below is the HTML and CSS.

Thanks Nick!

<div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffee, and more.</p> <p>If you'd like to follow me on Twitter, my username is <a href ="http://twitter.com/nickrp">@nickrp</a>.</p> </section>

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

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

Hi Warner,

Sorry for the slow reply! Unfortunately I'm not sure why this isn't working, but my guess is that it's not selecting the element properly. It could be because the CSS isn't being included properly (in which case nothing would be styled) or because the image doesn't have the class "profile-photo". A common mistake is to use an ID attribute when you really meant class, and vice versa.

Is the image actually circular in shape? If not, then this styling is not being applied. Another way to check if an element is being selected properly is to do something more dramatic that doesn't involve positioning, such as changing the background color, adding a border, or adding an outline. If those things don't appear, then you know that it's a selection problem of some kind.

You may also want to check this in other browsers. If you're using Firefox for example, there could be some issues that are detailed in the teacher notes.

The only browser that it shows correctly in is Google Chrome. I'll refer back to the Teachers notes to see why it may not be working in Firefox properly.

Thanks!

i had the same problem & i used 'clear:both' on top of css class 'profile-photo' . now it works fine.