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

HTML How to Make a Website Adding Pages to a Website Style New Pages

profile-photo Styles Not Showing

I'm not sure what I'm doing wrong. I've tried to double check everything, but I can't find what I'm doing wrong.

<img src="img/nick.jpg" alt="Photo of Nick" class="profile-photo"> ```

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

9 Answers

did you save your css file before viewing the page in the browser

Yes, I did. The styles still did not affect the image.

is the other css in the file being applied? double check that you saved your html as well

like this?

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">

Alright. I re-saved everything.

i assume you have some other css styles listed in your main.css file besides the stuff that affects the profile photo. when you view the page in the browser, do those styles get applied?

Oh. Yes, sorry. All the styles seem to be working except for those applied to the profile photo.

in the project files I noticed Nick doesnt have clear: both in his css

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

try using that and see if it works

Still no luck. ): I don't know what I have done. The code is unhappy with me.

your code looks correct. Im thinking its more likely a path/naming issue or saving or something.

I've tried to do the next step, and the styles don't seem to be applying correctly for it either. The bullets are still showing up for the ul.

        <ul class="contact-info">
          <li class="phone"><a href="tel:225-222-2222">225-222-2222</a></li>
          <li class="mail"><a href="mailto:email@gmail.com">email@gmail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=twitter">@twitter</a></li>
        </ul>
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

can you double check that you have a file called main.css thats in a folder called css. the folder called css should be at the root of your project

The css folder is there, main.css is inside. All of the other styles are working, changing the colors, text, section width, etc. It worked correctly until I added the second page, and now nothing seems to be changing.

go back and save all your html and all your css files one more time. it really sounds like a saving issue to me. But its hard to say without looking at anything and im about to head out so hopefully you figure it out. sorry I couldnt help much

That's alright. Thanks for your time. (:

I just renamed my css sheet, and changed all of the links on my pages, restarted workspaces, and now it's working! You must have been right about it being a saving/path problem. Thank you!

awesome! glad its working now