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 trialAmber Reid-Sumter
490 PointsThere's no space between the profile picture and the navigation under "About". I maybe missed a height adjust somewhere?
Problem: My profile picture is touching the navigation. I need it to have a space like it does in the video. However, I don't see where I may have went wrong with the height adjustment of the navigation on the "About" page.
Possible Solution: Something wrong with the nav height adjustment? Not sure where I went wrong. It needs to be the same height like under the "portfolio" page.
4 Answers
Khaleel Hamid
5,258 PointsUnder your header you have this
header {
float: left;
margin: 0 30px 0 0;
padding: 5px 0 0 0;
width: 100%;
}
The margin should be
margin: 0 0 30px 0;
I'm not exactly sure if that would solve the issue, but you can give it a try.
Khaleel Hamid
5,258 PointsCan you post the code at all, so we can see it and try to help you out.
Amber Reid-Sumter
490 PointsSure, I just did actually.
Khaleel Hamid
5,258 PointsThis should be your CSS for your profile pic
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
This is how the nav should be for
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;
}
Amber Reid-Sumter
490 PointsYeah, that's exactly what my nav and profile pic looks like. And I'm using Nick's picture. So I'm still not sure where it is I'm going wrong. Here's what I have for my CSS:
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%;
}
/*************************************
HEADING
*************************************/
header {
float: left;
margin: 0 30px 0 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: 0.75em;
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: 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 {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*************************************
COLORS
*************************************/
body {
background-color: #fff;
color: #999;
}
header {
background: #6ab47b;
border-color: #599a68;
}
nav {
background: #599a68;
}
h1, h2 {
color: #fff;
}
a {
color: #6ab47b;
}
nav a, nav a:visited{
color: #fff;
}
nav a.selected, nav a:hover {
color: #32673f;
} ```
Amber Reid-Sumter
490 PointsAlright, thanks again. I got the code up, let's see if we can review what's wrong. I'm sure it's not the html, right?
Khaleel Hamid
5,258 PointsWhen your typing your comment click the Markdown Cheatsheet and under code its those three backward slashes you need them at the top and bottom, so code needs to be in the middle.
Amber Reid-Sumter
490 PointsAmber Reid-Sumter
490 PointsProblem Fixed, lol. Wow, it's amazing what little movement can do to mess up a code. Thank you so much!
Khaleel Hamid
5,258 PointsKhaleel Hamid
5,258 PointsYay! Glad its working now and no problem :)