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 triallata sharma
iOS Development Techdegree Student 5,292 Pointson the styling of the About page...I followed it exactly...but my picture does not change to circle or becomes smaller..
I followed the styling of .profile-photo on main.css but it has not made any changes to the picture. what am I doing wrong? I have gone over this few times already and my code is exactly what Nick has on his page.
19 Answers
lata sharma
iOS Development Techdegree Student 5,292 Points/*************
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;
}
h1{
font-family: 'Changa one', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2{
font-size: 1.0em;
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: 0.75em;
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 {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*************
page Contact
*************/
.contact-info{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.conatct-info a{
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin:0 0 10px;
}
.contact_info li.phone a {
background-image: url('../img/phone.png');
}
.contact_info li.mail a {
background-image: url('../img/mail.png');
}
.contact_info li.twitter a {
background-image: url('../img/twitter.png');
}
/******************************
COLORS
******************************/
/*SITE BODY*/
body{
background-color:#fff;
color:#999;
}
/* green header*/
header{
background:#6ab47b;
border-color:#599a68;
}
/* nav background on mobile */
nav{
background-color:#599a68;
}
/* LOGO TEXT*/
h1, h2 {
color:#fff;
}
/*
links */
a{
color:#6ab47b;
}
/* NAV LINKr*/
nav a, nav a:visited{
color:#fff;
}
/* SELECTED NAV LINK*/
nav a.selected, nav a:hover {
color: #32673f;
}
Kristen Law
16,244 PointsOk, I think I found the issue!
Take a look at this part of your main.css
code:
*************
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 {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
The Page Portfolio
and Page About
headings are supposed to be commented out, which is done by surrounding them with /*
and */
.
It looks like you may have accidentally deleted the slash before the first line of asterisks.
The code should be as follows:
/*************
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 {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
Hope that helps!
Kristen Law
16,244 PointsThe problem is in your main.css
file:
In this part:
.contact_info li.phone a {
background-image: url('../img/phone.png');
}
.contact_info li.mail a {
background-image: url('../img/mail.png');
}
.contact_info li.twitter a {
background-image: url('../img/twitter.png');
}
You put .contact_info
instead of .contact-info
. Change it to the following and you should be good to go!
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
David Omar
5,676 Pointswe can't help unless you show us your code
lata sharma
iOS Development Techdegree Student 5,292 PointsPage About *************/ .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
lata sharma
iOS Development Techdegree Student 5,292 PointsBTW...I am not on Firefox. I use Google Chrome. Thanks for helping me out!
Kristen Law
16,244 PointsDid you specify the img
to have the class profile-photo
? Can you also post your about.html
file?
lata sharma
iOS Development Techdegree Student 5,292 PointsHi Kristen - here is my about.html. I did create class profile-photo. <section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3> About</h3> <p> Hi! I am Lata Sharma! This is my design portfolio and I am a wife and a mother of two wonderful children.</p> <p> If you would like to follow me on Twitter, my username is <a href="http://twitter.com/chaipanivodka">@chaipanivodka</a></p> </section>
Kristen Law
16,244 PointsCan you surround your code with 3 backticks?
Like this:
```
<your code here>
```
lata sharma
iOS Development Techdegree Student 5,292 Pointsdoes this go after <section> and before the closing section </section>? I just tried doing that and it did not work?
Kristen Law
16,244 PointsI was referring to the code you pasted into your previous post. You need to format it with the 3 backticks so that I can read it.
lata sharma
iOS Development Techdegree Student 5,292 Points<section>
<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
<h3> About</h3>
<p> Hi! I am Lata Sharma! This is my design portfolio and I am a wife and a mother of two wonderful children.</p>
<p> If you would like to follow me on Twitter, my username is <a href="http://twitter.com/chaipanivodka">@chaipanivodka</a></p>
</section>
Kristen Law
16,244 PointsThe code you've provided works perfectly fine for me. The problem may lie elsewhere in the code.
lata sharma
iOS Development Techdegree Student 5,292 PointsSo...how do I figure it out? I dont get any error msg anywhere? can I send you my full page?
Kristen Law
16,244 PointsYes, you can post the code for your entire about.html
page here. I'll take a look at it and see if I can find the issue.
lata sharma
iOS Development Techdegree Student 5,292 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lata Sharma |CEO YNYW</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Lata Sharma</h1>
<h2> CEO YNYW</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
```
<h3> About</h3>
<p> Hi! I am Lata Sharma! This is my design portfolio and I am a wife and a mother of two wonderful children.</p>
<p> If you would like to follow me on Twitter, my username is <a href="http://twitter.com/chaipanivodka">@chaipanivodka</a></p>
</section>
<footer>
<a href="http://twitter.com/chaipanivodka"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="http://facebook.com/chaipanivodka"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
<p>© 2014 Lata Sharma.</p>
</footer>
</div>
</body>
</html>
Kristen Law
16,244 PointsThis code seems correct. It's possible that your browser doesn't support border-radius. What version of Chrome are you using? Can you post a screenshot of your About page in the browser?
lata sharma
iOS Development Techdegree Student 5,292 PointsI am using this Version 36.0.1985.125
How do I add my 'About page' on the browser? sorry....this may be a dumb Q!!
Kristen Law
16,244 PointsHow to take a screenshot or how to post the image?
lata sharma
iOS Development Techdegree Student 5,292 PointsI have taken the screen shot...but where do I post the image?
Kristen Law
16,244 PointsYou can just upload it to a site like imgur and then post the link
Kristen Law
16,244 PointsSorry if I wasn't clear enough, but I meant the actual About page when you preview it in the browser, not the code.
lata sharma
iOS Development Techdegree Student 5,292 Pointsoh ok...here it is: http://imgur.com/7TAGLm6
Kristen Law
16,244 PointsThanks, can you also post your main.css
file?
lata sharma
iOS Development Techdegree Student 5,292 PointsTHANK YOU!!! That was it! I guess my eyes never looked at that at all! Thank you so much!
Kristen Law
16,244 PointsNo problem, glad I could help!
lata sharma
iOS Development Techdegree Student 5,292 PointsI am sorry to bother you...but I seem to have another problem. I am not getting the images on the contact page. I understand if you want to get back to me tomorrow. Here is my code:
/*************
page Contact
*************/
.contact-info{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a{
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
}
.contact_info li.phone a {
background-image: url('../img/phone.png');
}
.contact_info li.mail a {
background-image: url('../img/mail.png');
}
.contact_info li.twitter a {
background-image: url('../img/twitter.png');
}
Kristen Law
16,244 PointsCan you post your contact.html
page too?
lata sharma
iOS Development Techdegree Student 5,292 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lata Sharma |CEO YNYW</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Lata Sharma</h1>
<h2> CEO YNYW</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3>General Information</h3>
<p> I am not currently looking for design works but available for speaking gigs. For any questions please contact me</p>
<p> Please use phone for urgent inquiries. Otherwise twitter or email are best way to reach me.</p>
</section>
<section>
<h3>Contact details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:404-401-8565">404-401-8565</a></li>
<li class="mail"><a href="mailto:lata1.sharma@gmail.com">lata1.sharma@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=chaipanivodka">@chaipanivodka</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com/chaipanivodka"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="http://facebook.com/chaipanivodka"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
<p>© 2014 Lata Sharma.</p>
</footer>
</div>
</body>
</html>
lata sharma
iOS Development Techdegree Student 5,292 PointsThank you so much!!!