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

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

Shahzain Hashmi
Shahzain Hashmi
2,360 Points
Posted by Shahzain Hashmi
Shahzain Hashmi
2,360 Points

Not affecting my picture at all

So I'm trying to get my picture to get into that circular shape, and I've put in the code as instructed, however, it's not having any affect on my picture? Any help would be appreciated. My CSS is: .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

And my html is: img src="img/picture.jpg" alt="Photograph of Shahzain Hashmi" class="profile-photo"

I removed the <> because it took it as literal code and tried to insert the picture into the question .

kellyhayes4
kellyhayes4
1,602 Points
kellyhayes4
kellyhayes4
1,602 Points

Hello I haven't gotten to that point of the video yet but I did manage to add a quick picture of me to the same spot you are talking about. I wrapped the <img> link in <div></div> tags and created an id for the div. I then styled the id in my .css file and the picture appeared in the center of my header section. I haven't however been able to make it into a circled shape sadly, it's just a square shape right now but soon I will watch the videos and gather more information. I will give an example of how my code looks below---

/* This went into my html file*/ <header> <a href="index.html" id="logo"> <div id="Profile"> <img src="img/me.jpg" alt="Pic of me"> </div>

/This went into my css file/

Profile {

display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;

}

Hope this helps and I am not sure if this was the best way to go about doing it but it worked for me.

7 Answers

Leona Westdahl
Leona Westdahl
1,609 Points
Leona Westdahl
Leona Westdahl
1,609 Points

I had a similar issue that was related to using Firefox. Here is the info that I found in the 'Teachers Notes' section below the video: 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%; }

Hillary Chairul
Hillary Chairul
1,036 Points
Hillary Chairul
Hillary Chairul
1,036 Points

I'm using chrome and I have the same issue. No affect on my picture at all.

Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

It looks like it should be working. Sometimes workspaces takes a couple seconds to catch up and preview properly. It is very frustrating when you are not sure if your code is right or wrong! This could be the problem you are having.

Also try reading the markdown cheatsheet so you can post your code in codeview. It has a link right at the bottom of the textbox you post or reply in on the forums.

If you figure it out maybe try posting all of your css and html. That way we could see if its a problem further on or sooner in the code causing the issue.

Kirstine Nichols
Kirstine Nichols
13,592 Points
Kirstine Nichols
Kirstine Nichols
13,592 Points

It looks like you never applied a class to your photo in the html.

<img src="img/me.jpg" alt="Pic of me" class="profile-photo">

Your CSS styles are looking for a .profile-photo class in your html and it can't find it. If you apply that it should be able to work. Let me know if it doesnt!

Shahzain Hashmi
Shahzain Hashmi
2,360 Points
Shahzain Hashmi
Shahzain Hashmi
2,360 Points

But I do have the class in my html! img src="img/picture.jpg" alt="Photograph of Shahzain Hashmi" class="profile-photo" the last part is the class that the css should be picking up isn't it?

Kirstine Nichols
Kirstine Nichols
13,592 Points
Kirstine Nichols
Kirstine Nichols
13,592 Points

I apologize I was reading the first response. Can I see your whole code? There's a markdown cheat sheet that will show your code

Shahzain Hashmi
Shahzain Hashmi
2,360 Points
Shahzain Hashmi
Shahzain Hashmi
2,360 Points

'''<html> <head> <meta charset="utf-8"> <title>Shahzain Hashmi| Designer</title> </head> <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"> <body> <header> <a href="index.html" id="logo"> <h1>Shahzain Hashmi</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/picture.jpg" alt="Photograph of Shahzain Hashmi" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Shahzain Hashmi. This is my design portfolio where I share all of my 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 add me on Facebook, my user name is <a href="https://www.facebook.com/shahzain.hashmi">Shahzain Hashmi</a>.</p>

      </section>
      <footer>  
        <a href="http://www.twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="Social-Icon"></a>
        <a href="http://www.facebook.com/shahzain.hashmi"><img src="img/facebook-wrap.png" alt="Facebook Logo" class= "Social-Icon"></a>
        <p>&copy; 2015 Shahzain Hashmi.</p>

      </footer>
    </div>

</body> </html> ''' This is my html

Shahzain Hashmi
Shahzain Hashmi
2,360 Points
Shahzain Hashmi
Shahzain Hashmi
2,360 Points 
.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

This is my css

Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

I don't see where your css is linked to your html document. Is this the issue or did you just miss that when posting your html?

Shahzain Hashmi
Shahzain Hashmi
2,360 Points
Shahzain Hashmi
Shahzain Hashmi
2,360 Points

It is linked, but not sure why it didn't copy onto the code I posted

stevenstabile
stevenstabile
9,763 Points
stevenstabile
stevenstabile
9,763 Points

I drove myself crazy when nothing affected the photo while using Safari. I opened the workspace in Chrome and the picture was as it should be in the lesson so it was just a browser issue, not a code issue.