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
Kelly Truman
7,134 PointsPhoto remains square.
Here is my code. I am using Chrome and have signed out and back in and still have a square photo:
<section>
<img src="img/kel.jpg" alt= "Photo of Kelly" class="profile-photo">
/*******************************
PAGE: ABOUT
********************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
Stephanie Franco
9,167 PointsDid you select .profile-photo with enough specificity? Meaning, is there anything above it in the cascade that is preventing it from inheriting the correct style?
Kelly Truman
7,134 PointsHere's the full css:
/*******************************
GENERAL
********************************/
body{
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
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;
}
a{ color: #6ab47b;}
h1{font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
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, 0;
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: .075;
text-align: center;
clear: both;
padding-top: 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: 100%;
}
/*******************************
COLORS
*******************************/
/*site body*/
body {
background-color: #fff;
color: #999;
}
/* Green Header */
header{
background: #9AA47B;
border-color: #599A68
}
/*headline color*/
h1,h2 {
color: #fff;
}
/*Nav background on mobile devices */
nav {
background: #599a68;
}
/*Nav link colors*/
nav a, nav a:visited {
color: #fff;
}
nav a.selected, nav a:hover {
color: #32673f;
}
Here's the full about.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Kelly A. Truman | Learning to Code </title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Kelly A. Truman</h1>
<h2>Learning to Code</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/kel.jpg" alt= "Photo of Kelly" class="profile-photo">
<h3>About</h3>
<p> Kelly A. Truman was born in Charleston, West Virginia and spent the first twelve years of her life there. When she was twelve years-old she moved to Shreveport, Louisiana due to her dad transferring for a job. Her family lived in Louisiana for what equated to an entire school year. It was an eye opening experience for her, and in many ways set the course for her life.
At the end of the summer in 1984, her family moved back to Charleston, West Virginia, and she started her 8th grade year. The funny thing about that period of her life was she didn’t fit in at all and she knew it.
When she turned 18, she moved to Texas for college. The city she chose was Dallas. She found herself 1200 miles away from home and in a city she knew no one in. She was wide-eyed and full of adventure. She often says she grew up in Dallas, because in so many ways she did.
It was in Dallas that she began to discover her own beliefs and separate them from her parents. It was there that she began to question so many fundamental things about what she was ‘supposed to be’ and ‘supposed to do’. It would still be a few years before she truly came to terms with herself, but it was in Dallas that she started facing herself on her own terms. She stayed in Dallas until she completed her first degree and then moved to Nashville.
The years between 1992 and 1995 were truly the years of personal discovery for her. They were some of the most confusing years she ever spent. Discovering ones sexuality when it is not in line with the norms of society is a very scary process. She had no one to discuss her feelings with and frankly, they scared her. She knew it was ‘wrong’ in the eyes of her strict upbringing in church, but yet God made her and she had developing feelings for women. How could she possibly reconcile 18 years of religion with her physical yearnings or lack thereof?
She found herself fighting with who she was and what was expected of her. During those years, she fell in “love” with two different men and got engaged once. In the end, she wound up in a relationship with a woman that lasted eight and a half years. It was after that relationship ended that she met Christine and her life would forever be changed.
This was their story. She initially started writing about her budding relationship with Christine and posting it online in a blog. It started as sweet as any other love story found on bookshelves around the world. It ended up in a spiraling descent into her own personal hell of LGBT domestic violence.
She found herself in a highly abusive relationship with what seemed no way out. This would become her life for the period between September 2005 and January 2008. As the story of A Beautiful Mess ~ Confessions from the Second Closet unfolds, the symptoms are obvious. Finding her way out of the circle of violence she lived was not so easy…….
This is her story.
</p>
<p>If you'd like to follow me on Twitter, my user name is <a href="http://twitter.com/atxkat28">@ATXKAT28</a>.</p>
</section>
<footer>
<a href="http://twitter.com/atxkat28"><img src="img/twitter-wrap.png" alt="Twitter Logo" class= "social-icon"></a>
<a href="http://www.facebook.com/atxkat28"><img src="img/facebook-wrap.png" alt="Facebook Logo" class= "social-icon"></a>
<p>© 2016 Kelly A. Truman. </p>
</footer>
</div>
</body>
</html>
2 Answers
James Gill
Courses Plus Student 34,936 PointsKelly,
Two things: It's either CSS, browser-specific rendering, or both.
In this class:
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
when using margin: 0 auto, you normally wouldn't have a third value. Also, a border-radius of 100% causes the corners to overlap, and could potentially mess things up. try a pixel value for that.
If that doesn't fix it, try using a different browser (especially if you're using IE or Chrome).
Kelly Truman
7,134 PointsSwitching to Safari worked! Thanks everyone!
Kelly Truman
7,134 PointsKelly Truman
7,134 PointsYes I was in the process of adding the index.html code when the phone rang for my paycheck job :)