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

Posted by Trista Ramirez
Trista Ramirez
1,147 Points

My photo did not round out on my profile picture on my page?

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

MY CSS CODE???

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

The border-radius have to be at 50% since is half of the picture size. Try changing the border-radius to 50% in your code.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points 
.profile-photo {
        display:block;
        max-width:150px;
        margin: 0 auto 30px;
       border-radius:50%;
 }

4 Answers

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

make sure it targets the correct class or id tag.

Trista Ramirez
Trista Ramirez
1,147 Points
Trista Ramirez
Trista Ramirez
1,147 Points

/********* GENERAL **********/

body{ font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; background: ; }

a { text-decoration: none; }

img{ max-width: 100%; }

h3 { margin: 0 0 1em 0, }

/***************** HEADING *****************/

header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo{

text-align: center; margin: 0; margin: 0px; }

h1 { font-family: 'Muli', sans-serif; margin: 20px 0; font-size: 1.50em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight:normal; }

/***************** NAVIGATION *****************/

nav { text-align: center; padding: 10px; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a{ font-weight: 800; padding: 15px 10px; }

/***************** FOOTER *****************/

footer{ font-size: 0.75em; text-align: center; clear: both; padding: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/***************** PAGE PORTFOLIO *****************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

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

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

/**************** COLORS *****************/

/* site body */ body{ background-color: #fff; color: #999; }

/* logo text */ header{ background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav{ background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

Trista Ramirez
Trista Ramirez
1,147 Points
Trista Ramirez
Trista Ramirez
1,147 Points

Still did not work Abe??

Trista Ramirez
Trista Ramirez
1,147 Points
Trista Ramirez
Trista Ramirez
1,147 Points

my photo is 1952 x 3264 pixels - 1.12 MB is it WAY to large is that why it won't round out?