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.
Zachary Pratt
2,395 PointsContact and About Page
What caused my header colors to no longer appear? At the same time, my page high lights for (portfolio, about, contact) stop working. My picture on the about page is no longer centered? All of this happened at the same time. They were all correct before. I can't move forward until these issues have been resolved. Please help. I started learning html and css a month ago.
4 Answers
MUZ140920 Kudakwashe Murungu
6,316 PointsCan you edit your code .contact-info li.mail a { background-image: url('../img/mail.png'); align-content:
to
.contact-info li.mail a { background-image: url('../img/mail.png'); }
Save and test
Zachary Pratt
2,395 PointsYes. I did and it was the fix, for everything except centering my photo on the about page. GREAT! Thank you so very much sir.
MUZ140920 Kudakwashe Murungu
6,316 PointsNothing much can be done without previewing your code, Like @Victor has pointed out, post your code
Zachary Pratt
2,395 PointsI'm not sure what is meant by "using the markdowns". Should I copy and paste the code here?
Zachary Pratt
2,395 PointsI see the cheat sheet. Thanks
Zachary Pratt
2,395 Points/******************** 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: 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; clear: both; text-align: center; 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 { display: inline-block; max-width: 150 px; margin: 0 auto 30px; border-radius: 100%; }
?******************** 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; 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'); align-content:
.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: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ nav { color: #6ab47b; }
/* nav link */ nav a,nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
MUZ140920 Kudakwashe Murungu
6,316 PointsMost welcome @Zachary Pratt im glad I could help
Victor Learned
6,976 PointsVictor Learned
6,976 PointsPlease post your code or it's impossible for us to help. Remember to use the markdowns correctly so it's all formatted & readable!