on the styling of the About page...I followed it exactly...but my picture does not change to circle or becomes smaller..

Question

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.

Answer 1 · 2014-08-17T21:37:09Z

August 17, 2014 9:37pm

/*************
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;
}

Answer 2 · 2014-08-17T21:43:52Z

August 17, 2014 9:43pm

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!

Answer 3 · 2014-08-17T22:38:48Z

August 17, 2014 10:38pm

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

Answer 4 · 2014-08-17T17:43:40Z

August 17, 2014 5:43pm

we can't help unless you show us your code

Answer 5 · 2014-08-17T18:01:22Z

August 17, 2014 6:01pm

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

Answer 6 · 2014-08-17T19:01:14Z

August 17, 2014 7:01pm

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

Answer 7 · 2014-08-17T19:24:22Z

August 17, 2014 7:24pm

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>

Answer 8 · 2014-08-17T19:47:31Z

August 17, 2014 7:47pm

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

Answer 9 · 2014-08-17T19:50:59Z

August 17, 2014 7:50pm

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

Answer 10 · 2014-08-17T20:23:44Z

August 17, 2014 8:23pm

So...how do I figure it out? I dont get any error msg anywhere? can I send you my full page?

Answer 11 · 2014-08-17T20:38:32Z

August 17, 2014 8:38pm

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

Answer 12 · 2014-08-17T21:01:48Z

August 17, 2014 9:01pm

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

Answer 13 · 2014-08-17T21:10:23Z

August 17, 2014 9:10pm

I have taken the screen shot...but where do I post the image?

Answer 14 · 2014-08-17T21:13:45Z

August 17, 2014 9:13pm

here it is: http://imgur.com/djmuc2E

Answer 15 · 2014-08-17T21:21:19Z

August 17, 2014 9:21pm

oh ok...here it is: http://imgur.com/7TAGLm6

Answer 16 · 2014-08-17T21:52:59Z

August 17, 2014 9:52pm

THANK YOU!!! That was it! I guess my eyes never looked at that at all! Thank you so much!

Answer 17 · 2014-08-17T22:21:12Z

August 17, 2014 10:21pm

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

Answer 18 · 2014-08-17T22:30:03Z

August 17, 2014 10:30pm

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

Answer 19 · 2014-08-17T22:42:34Z

August 17, 2014 10:42pm

Thank you so much!!!

Welcome to the Treehouse Community

Looking to learn something new?

lata sharma

lata sharma

on the styling of the About page...I followed it exactly...but my picture does not change to circle or becomes smaller..

19 Answers

lata sharma

lata sharma

Kristen Law

Kristen Law

Kristen Law

Kristen Law

David Omar

David Omar

lata sharma

lata sharma

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

Kristen Law

Kristen Law

lata sharma

lata sharma

lata sharma

lata sharma