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.

CSS

I viewed my site on chrome's developer tools and now my site's CSS isn't correct. Can anyone help me determine a fix?

I've been working my way through the website building lessons and everything has been working correctly. During one of the lessons regarding Chrome's developer tools, I viewed my site (which is still only loaded through TH's workspace, I haven't purchased a domain or host) and began clicking around and exploring the tool. After I refreshed my page, the website css was completely broken.

I've done my best to go back through each section and check for missing curly brackets or semi colons. Everything appears correct but I'm very new to all of this, so I could be overlooking something pretty obvious.

Has anyone else had this issue or can anyone offer advice?

Thank you!

2 Answers

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Can you post your CSS here? Click the "Markdown Cheatsheet" link below the text area to see how to embed your CSS on this page if you are not familiar.

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

.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');
}

.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 */
a {
  color: #6ab47b;
}

/* NAV LINK */
nav a, nav a:visited { 
  color: #fff;
}

/* SELECTED NAV LINK */
nav a.selected, nav a:hover {
  color: #32673f;
}

Thanks for your help

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I don't see anything structurally wrong with your CSS. I'd need to see the HTML too since the CSS could be structurally right but wrong for the HTML that you are using.

Take a snapshot of your workspace and share the link. It looks like a camera icon in the upper right corner. Also provide a brief description of whats wrong unless it's super obvious.

Unfortunately, I started over. I figured it would be good review, and so far it has been. I did save the code in an external editor though, so I'll post the html. I'll also include a link to a screen shot of the broken webpage. Not sure how else to share this with you than through an outside site. The screen shot is of the top portion of the page. This is what it looked like after I began messing around with Chrome's dev tool. I was just clicking around and learning how to highlight different sections of the page, I'm not sure if I clicked anything to change my code or if that's even possible. Anyways, after I refreshed my page, none of the css was applied and page looked like my above link.

Thanks again for your help.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bryan Payment | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Righteous%7CMontserrat:700">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Bryan Payment</h1>
        <h2>Designer</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 id="gallery">
          <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>Photoshop blending.</p>
           </a>
          </li>
           <li>
           <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Photoshop blending.</p>
           </a>
          </li>
          <li>
           <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>80's style glow.</p>
           </a>
          </li>
          <li>
           <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>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"><img src="img/twitter-wrap.png" alt= "Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt= "Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Bryan Payment.</p>
      </footer>
    </div>
  </body>
</html>
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I think I figured it out. I think that your link to the css file is broken. I noticed that it's called "main.css" in the lesson but yours is called "responsive.css" so maybe treehouse changed it on you to give you something to debug? Anyway, when I break the link to that file I get the same results as your image.

Here is my reproduction of the error. I took a snapshot and am sharing the workspace. https://w.trhou.se/m2o9p9y8p4

If you "fork" my snapshot, that should pull it into your workspaces so you can edit the code. But basically I put a note in the "index.html" file. That explains how to verify that your path to your css is correct. Fix the path in my example and you will see that it displays correctly.

For future reference, to take a snapshot just click the camera icon at the top of the workspace. It will give a link that you can share.

Thanks for your help, I'm not sure how the link got broken in my html?

Thank you, I'll look over this info.