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 trialSophia Gr
1,361 PointsFooter not changing
Hi, I made the CSS modifications to change the footer but it is not changing the font size and color to light gray. I tried changing the order in the CSS file but it's no working. Does anyone know what might be going on? I also tried adding footer p and making it more specific to the text but it's not working. Thanks!
main.css file
/****************/
GENERAL
****************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
/****************/
HEADING
****************/
#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;
}
/****************/
FOOTER
****************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
}
/****************/
COLORS
****************/
/* site body */
body {
background-color: white;
color: #999;
}
/* green header */
header {
text-align: center;
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;
}
index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sophia</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700italic,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Sophia</h1>
<h2>Developer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/sophmoji"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
<a href="http://facebook.com/sophmoji"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
<p>© Sophia 2016.</p>
</footer>
</div>
</body>
</html>
4 Answers
Ryan Dudley
Treehouse Project ReviewerIt might be caused by the way you are doing your comments, you need to be careful because the way you have them set up they are being closed before you finish the comment, which could cause some weird errors.
For example, you currently have this:
/****************/ <------ this is closing the comment, leaving the rest of it not commented out.
FOOTER
****************/
So I would try changing your comments to something like this:
/****************
FOOTER
****************/ <------ this now closes the comment, encapsulating the entire comment.
Mark Pryce
8,804 PointsCould you use the cheatsheet to post code? Makes it easy to read, you can find it under the text area.
Try targeting your paragraph within your footer.
footer p {
font-size: 1em ;
color: purple ;
}
Hope it helps, Happy coding.
Sophia Gr
1,361 PointsHi Mark, Thanks for the tip! I re-formatted it and I think it should look okay now. I tried your suggestion but it's still ignoring the entire footer css portion. Sophia
Mark Pryce
8,804 PointsWell from what I can see is you need to move your footer color declaration into your " site colors" section and place it below the body tag as this might overwrite it.
Also try targeting the footers paragraph to change font-size.
Is it just the color and font-size that's not working?
Sorry on my phone.
Sophia Gr
1,361 PointsThanks for your help! Moving the footer css below body and rewriting the comments did it :-)
Mark Pryce
8,804 PointsMark Pryce
8,804 PointsI missed that welll spotted ^^