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
Amanda Bater
7,686 PointsAlmost 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;
}
4 Answers
Kristopher Van Sant
Courses Plus Student 18,830 PointsHey 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
Courses Plus Student 18,830 PointsAlso, 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
7,686 PointsHi 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?
Kristopher Van Sant
Courses Plus Student 18,830 PointsAwesome! 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
7,686 PointsAhh can't believe that's all it was! Thank you, it's looking right now!
Kristopher Van Sant
Courses Plus Student 18,830 PointsHooray! And no problem at all. So happy to help :)
Kristopher Van Sant
Courses Plus Student 18,830 PointsKristopher Van Sant
Courses Plus Student 18,830 PointsHey 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!