Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Amanda Bater
Amanda Bater
7,686 Points

Almost finished the create your own website track...questions?

I've almost finished the create your own website track and there's a couple of aspects of my websites layout that don't look right to me and I want to understand why.

Firstly, on the about page I can't seem to do anything with the size of the profile picture...plus even after writing the media queries it won't display in two columns with the text next to the photo like in the example, text stays underneath the photo.

Also, when I resize the browser window to full width the text in my nav bar is not level with my h1 and h2 text, it sits below it, and I'd really prefer it to be level as per the example. I've been through my css and can't find what I'm doing wrong, does anyone have any suggestions?

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

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

a {
  text-decoration:none;
}

img {
  max-width: 100%;
}

/*wrapper*/
#wrapper {
  max-width:940px;
  margin: 0 auto;
  padding: 0 5%;
}

#logo {
  text-align:center;
  margin: 0;
}

a, a:visited {
 color:#737373;
}

h3 {
  margin: 1em 0 1em 0;
  font-weight:normal;
  font-size:16px;
}

/******************************
HEADING
******************************/
header {
  float: left;
  margin: 0 0 30px 0;
  padding: 30px 0 0 0;
  width: 100%;
  background: #cecece;
  border-color:#b2b1b1;
}

h1, h2 {
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
}

h1 {
  margin: 0px 0;
  font-size:36px;
  font-weight:normal;
  line-height:0.8em;
}

h2 {
  font-size:14px;
  margin: -5px 0 0;
  padding: 10px;
  font-weight: normal;
}

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

nav {
  text-align:center;
  padding:7px;
  margin:0 0 0;
  background: #b2b1b1;
  font-family: 'Fira Sans', sans-serif;
}

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

nav li {
  display: inline-block;
}

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

nav a, nav a:visted {
  color: #fff;
}

nav a.selected, nav a:hover {
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
  font-style:italic;
}

/******************************
SITE BODY
******************************/
body {
  background-color:white;
  color: #b2b1b1;
}

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

#gallery {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#gallery li {
  list-style-type: none;
  float:left;
  width:45%;
  margin:2.5%;
  background-color:#f5f5f5
  color: #b2b1b1;
  font-size: 14px;
}

#gallery li a p {
  margin:0;
  padding: 5%;
  font-size:11px;
  color: #b2b1b1;
}

#gallery li a p.selected, li a p:hover {
  font-style:italic;
}




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

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

p {
  font-weight:normal;
  font-size: 12px;
}



/******************************
PAGE:CONTACT
******************************/

.contact-info {
  list-style-type:none;
  font-size: 12px;
  font-weight: normal;
  color: #fff;
  padding: 0;
  margin: 0;
}

.contact-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('../IMAGES/phone.png');
}

.contact-info li.mail a {
  background-image: url('../IMAGES/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../IMAGES/twitter.png');
}



/******************************
PAGE:FOOTER
******************************/

footer {
  font-size:12px;
  text-align:center;
  clear: both;
  padding-top:50px;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hey there! I added 3 back-ticks ``` before and after your code so that it shows up better and is easier to read.

I was also wondering if you'd be able to post a snapshot of your workspace here? Or at least your responsive.css file. Seeing the rest of your code will help. Thanks!

4 Answers

Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hey Amanda. In regards to your about page photo and paragraph not being side by side, in your media query did you float your profile photo left?

.profile-photo {
    float: left;
  }
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Also, as per your nav not being aligned with the other elements in the header try changing your nav's padding following

nav {
  padding: 10px 0;
}

When you set your padding to have just one value your are giving all four paddings that value. So currently your giving each side of your nav a 7px padding. If you give your padding two values, as in the example above, the first value sets the padding for the top and bottom and the second value sets the right and left padding. So we're giving both the top and bottom paddings a value of 10px. And the right and left paddings a value of 0.

If adjusting the padding doesn't totally fix the problem then we'll want to look at the nav's margins as well as the margins for the other elements in the header.

Amanda Bater
Amanda Bater
7,686 Points

Hi Kristopher...thanks for your help, changing the padding on my nav solved that issue. As for profile photo, it has been floated left. So I'm not sure what else I could have done wrong?

https://w.trhou.se/k31nx0rf26

Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points

Awesome! Glad that helped. And thank you for the snapshot. For your profile photo issue you'll want to look at your about.html file, line 28 where you have your image. You've forgotten the equal sign, =, needed for setting your image's class to "profile-photo".

<img src="MY IMAGES/amanda.jpg" alt="Photograph of Amanda Bater" class="profile-photo">

Once you add that in and save and refresh you should see your image display how you intended.

Hope that helps! :)

Amanda Bater
Amanda Bater
7,686 Points

Ahh can't believe that's all it was! Thank you, it's looking right now!