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

General Discussion

Posted by Mark Tatum
Mark Tatum
2,482 Points

Border Radius Not changing photo shape: What did I do wrong?

So, I am starting to go cross eyed trying to find what I did wrong. According to the video the result of the following coding is supposed to make my About photo round. It did not work.

CSS: /******************* Page: About *******************/

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

About HTML: <section> <img src="img/mark8.jpg" alt="Photo of Mark" class="profile photo"> <h3>About</h3> <p>Hi, I'm Mark. This is my photo portfolio where I share photos of my favorite place in Mexico, Tlacotalpan, Veracruz.</p> <p>If you would like to follow me on Twitter, my username is <a href="http://twitter.com/MWTatum">@MWTatum.</a></p> </section>

Thank you for the support!!

9 Answers

Vicki Corich
Vicki Corich
6,632 Points
Vicki Corich
Vicki Corich
6,632 Points

Try 50% for the border-radius. My notes say the width and height should also be the same.

Mark Tatum
Mark Tatum
2,482 Points

Nothing changes which makes me think that there is an error in my about html. I have played around with a variety of different border radiuses with absolutely no change to the image shape. Thanks!

MURAT AYDIN
MURAT AYDIN
2,942 Points
MURAT AYDIN
MURAT AYDIN
2,942 Points

if u adding to this css : border: 1px solid red; do you see red border ?

Mark Tatum
Mark Tatum
2,482 Points

No changes showing with border, photo shape or size. Thanks

Christine Rose
Christine Rose
6,745 Points
Christine Rose
Christine Rose
6,745 Points

Try changing the 100% to 100px

Mark Tatum
Mark Tatum
2,482 Points

Unfortunately, that did not work. Thanks

Christine Rose
Christine Rose
6,745 Points
Christine Rose
Christine Rose
6,745 Points

You mentioned above there might be something off in the HTML? Could we see that code please?

Mark Tatum
Mark Tatum
2,482 Points
Mark Tatum
Mark Tatum
2,482 Points

Thanks Christine. I pasted what I believed was the relevant html above. Here is the whole thing though:

I appreciate your help!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mark's Favorite Lexington Restaurants | Restaurant Reviews</title> <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"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Mark's Favorite Lexington Restaurants</h1> <h2>Restaurant Reviews</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/mark8.jpg" alt="Photo of Mark" class="profile photo"> <h3>About</h3> <p>Hi, I'm Mark. This is my photo portfolio where I share photos of my favorite place in Mexico, Tlacotalpan, Veracruz.</p> <p>If you would like to follow me on Twitter, my username is <a href="http://twitter.com/MWTatum">@MWTatum.</a></p> </section> <footer> <a href="http://facebook.com/mark.tatum.737"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <a href="http://twitter.com/MWTatum"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <p>© 2015 Mark Tatum.</p> </footer> </div> </body> </html>

Christine Rose
Christine Rose
6,745 Points
Christine Rose
Christine Rose
6,745 Points

It looks like much of your code isn't showing up here. Be sure you wrap them in like this at the top and bottom:

See how the above makes a little code window? That's because I used the symbols needed (three backticks before and after the code). Refer to the Markdown Cheatsheet and ensure you're wrapping all the HTML and CSS in those symbols, otherwise the browser will read the HTML instead of showing it to us.

Mark Tatum
Mark Tatum
2,482 Points

Thanks for the info Christine. I pasted it below.

I am concerned because I am following the video's and I cannot find the error. If it worked for him why is it not working for me. It must be something I am doing wrong!

Thanks

Richard Nicholls
Richard Nicholls
1,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

There is no picture in the html apart from the social icons

Arthur Head
Arthur Head
12,624 Points
Arthur Head
Arthur Head
12,624 Points

I couldn't see the 

<head>

element of your html - but you should verify that you're linking to you're css stylesheet. i.e.

<link rel="stylesheet" href="path to your css file">

I make that mistake from time to time - but luckily it's a pretty simple fix! Hopefully that's all it is!

Mark Tatum
Mark Tatum
2,482 Points
Mark Tatum
Mark Tatum
2,482 Points 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mark's Favorite Lexington Restaurants | Restaurant Reviews</title> 
  <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">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>Mark's Favorite Lexington Restaurants</h1>
        <h2>Restaurant Reviews</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/mark8.jpg" alt="Photo of Mark" class="profile photo">
<h3>About</h3>
        <p>Hi, I'm Mark. This is my photo portfolio where I share photos of my favorite place in Mexico, Tlacotalpan, Veracruz.</p>
        <p>If you would like to follow me on Twitter, my username is <a href="http://twitter.com/MWTatum">@MWTatum.</a></p>
  </section>
      <footer>
        <a href="http://facebook.com/mark.tatum.737"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="http://twitter.com/MWTatum"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p>&copy; 2015 Mark Tatum.</p>
      </footer>
      </div>
  </body>
</html>

Thanks for the info on how to paste code. Here is my about HTML.

Mark Tatum
Mark Tatum
2,482 Points
Mark Tatum
Mark Tatum
2,482 Points

Sorry guys. I found the error. I did not have a hyphen in the class="profile-photo........ just an empty space. It is working now.

Thanks,