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
Erin Connolly
514 PointsI cannot figure out why there is no space between my navbar and profile pic. I tried adding padding to different class,
/********************************* GENERAL **********************************/
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img{ max-width: 100% }
/********************* HEADING *********************/
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; }
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; padding-top:50px; color:#CCC; }
/**************************************** 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: 150x; margin: 0 auto 30px; border-radius: 100%; padding-top: 10px; } /**************************************** COLORS ****************************************/
/site body/ body{ background-color: #fff; color:#999; }
/green header/ header{ background: #6ab47b; border-color: #599a68; }
/nav background on mobile/ nav{ background: #599a68; }
/logo text/ h1,h2 { color: #fff; }
/links/ a { color: #6ab47b; }
/nav link/ nav a, nav a:visited { color:#fff }
/selected nav link/ nav a.selected, nav a hover{ color: #32673f; }
8 Answers
Colton Ehrman
Courses Plus Student 5,859 PointsDidn't really look into all your code, but it looks like all the COLOR properties have invalid comments in front of them, remember that a comment in CSS looks like
/* comment here */
Don't forget the asterisks, you need at least one. The invalid comments could be causing problems with your css and producing weird results.
Caleb Kleveter
Treehouse Moderator 37,862 PointsThis CSS looks like it is for the home page, not the about page.
Colton Ehrman
Courses Plus Student 5,859 PointsIt's the main css which has styles applied for every page, his about page styling is under the PAGE: ABOUT comment header
Erin Connolly
514 PointsColton,
Re: your first comment. I don't know why but the asterisks don't come across here in the forum. They are in my code, though.
Re: your response to Caleb. That is correct.
Thank you
Seth Reece
32,867 PointsI noticed in the .profile-photo you have a max-width of 150x. Probably meant px?
Erin Connolly
514 PointsSeth,
Good catch. I fixed it, but that did not resolve the issue.
Erin Connolly
514 PointsSorry Ted...I did not see your comment before. I don't understand the first part of the comment. As the video suggested for longer blocks of code, I cut and pasted from codpen but that doesn't seem to render very well...Anyway, here is a link to the snapshot of the workspace: https://w.trhou.se/bw13h6c924
I'm now also having trouble with my CSS not working on the .contact-info class...
Seth Reece
32,867 PointsErin,
Thanks for sharing your workstation. I was able to fork it so I could play around a bit. A couple things I noticed. A couple of instances which you used padding in a percent value. My understanding is percent value makes the padding a percentage of the containing element. For now I changed the padding in #wrapper to 0. While plying around with your image in my browser I noticed the section element containing you image was skewing the image if I tried to apply more top padding to it. I removed the section element and wrapped the image in a div. I gave the div the class of profile-photo, and used css only to apply a border -radius to it. e.g.
<div id = "wrapper">
<div class="profile-photo">
<img src="img/Head Shot for website.jpg" alt="Profile Pic">
</div>
<h3>About</h3>
and css:
.profile-photo{
display: block;
max-width: 150px;
margin: 0 auto 30px;
padding-top: 20px;
}
.profile-photo img {
border-radius: 100%;
}
There are probably tons of different ways. To accomplish what you desire. This is one Idea. You probably haven't done a course yet here on using Chrome Development tool to hack around with your css, but GIl Hernandez has one. It can be real helpful.
Caleb Kleveter
Treehouse Moderator 37,862 PointsHere is a screen shot of my workspace, I have finished the course so I will have more code.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsThe Markdown Cheatsheet linked below will show you how to format your code so that all or the formatting is correct. You can also make a workspace fork snapshot by clicking the camera icon on the upper right side of the workspace, opening the snapshot, and posting the url here. We can the look at the code and help figure out what is really going on.