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 How to Make a Website Adding Pages to a Website Style New Pages

lata sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
lata sharma
iOS Development Techdegree Student 5,292 Points

on 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
seal-mask
.a{fill-rule:evenodd;}techdegree
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;
}

Ok, 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!

The 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
David Omar
5,676 Points

we can't help unless you show us your code

lata sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
lata sharma
iOS Development Techdegree Student 5,292 Points

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

Did you specify the img to have the class profile-photo? Can you also post your about.html file?

lata sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
lata sharma
iOS Development Techdegree Student 5,292 Points

Hi 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>

Can you surround your code with 3 backticks?

Like this:

```
<your code here>
```
lata sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
lata sharma
iOS Development Techdegree Student 5,292 Points

does this go after <section> and before the closing section </section>? I just tried doing that and it did not work?

I 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
seal-mask
.a{fill-rule:evenodd;}techdegree
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>

The code you've provided works perfectly fine for me. The problem may lie elsewhere in the code.

Yes, 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
seal-mask
.a{fill-rule:evenodd;}techdegree
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>&copy; 2014 Lata Sharma.</p>
          </footer>
        </div>
      </body>
  </html>

This 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?

How to take a screenshot or how to post the image?

You can just upload it to a site like imgur and then post the link

Sorry if I wasn't clear enough, but I meant the actual About page when you preview it in the browser, not the code.

Thanks, can you also post your main.css file?

No problem, glad I could help!

lata sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
lata sharma
iOS Development Techdegree Student 5,292 Points

I 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');
}

Can you post your contact.html page too?

lata sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
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>&copy; 2014 Lata Sharma.</p>
          </footer>
        </div>
      </body>
  </html>