Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

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

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

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!

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

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

Christine Rose
Christine Rose
6,745 Points

Try changing the 100% to 100px

Unfortunately, that did not work. Thanks

Christine Rose
Christine Rose
6,745 Points

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

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

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.

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

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

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!

<!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.

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,