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

CSS How to Make a Website Adding Pages to a Website Add Iconography

Posted by Jereme Wijesekera
Jereme Wijesekera
3,283 Points

Why aren't my CSS class style changes affecting the browser?

In the previous step, my picture would not get centered nor would it get more round based off of the border-radius function. And in this section none of the style changes for "contact-info" in CSS affect the Browser as well. Help please?

Jereme Wijesekera
Jereme Wijesekera
3,283 Points

Contact.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jereme Wijesekera | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jereme Wijesekera</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3>General Information</h3> <p>I am not currently looking for new design work. I am available for help though. Feel free to contact me</p> <p>Please only use phone inquiries to contact me. No emails please</p> </section> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-5555">555-5555</a></li> <li class="mail"><a href="mailto:jwijesekera@example.com">jwijesekera@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=jermskeees">@jermskeees</a></li> </ul> </section> <footer> <a href="http://twitter.com/Jermskeees"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/wijesekera.jereme"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© 2014 Jereme Wijesekera.</p> </footer> </div>
</body> </html>

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%; }

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; text-align: center; clear: both; 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: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/******************* PAGE: CONTACT *******************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

/******************* 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; }

Marcus Parsons
Marcus Parsons
15,719 Points

Hi Jereme,

Can you please post a snapshot of your current Workspace? This will help us see exactly what you have. If you don't know how to do that, here is the post for you: http://www.teamtreehouse.com/forum/workspace-snapshots

Jereme Wijesekera
Jereme Wijesekera
3,283 Points

https://w.trhou.se/si3soqyadw

Here's my snapshot! Thanks Marcus!

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Jereme,

After checking your workspace, it looks like you accidentally targeted the phone class 3 times. These are supposed to change to "mail" and "twitter":

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}
Jereme Wijesekera
Jereme Wijesekera
3,283 Points

I Changed them and the CSS is still not affecting my browser in any way shape or form. It keeps it in its HTML format

Marcus Parsons
Marcus Parsons
15,719 Points

From the workspace you gave me, I'm seeing the correct styles on my end. Try deleting your internet history in your browser including your cache because the browser might be trying to use a cached version of your site.

Marcus Parsons
Marcus Parsons
15,719 Points

Also, and this might seem obvious, but just be sure to save the files first and then either refresh the page. Sometimes everyone just skips this step haha

Jereme Wijesekera
Jereme Wijesekera
3,283 Points

So I deleted my Cache and now it works perfectly fine! Thanks Marcus that's what I needed haha! You the man!

Marcus Parsons
Marcus Parsons
15,719 Points

You're welcome, Jereme! I still haven't figured out when certain browsers cache images and such, but if you know you saved and your code is updating, try deleting your cache :P Happy Coding =]