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

Posted by Bryan Payment
Bryan Payment
1,714 Points

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
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.

Bryan Payment
Bryan Payment
1,714 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;
  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
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.

Bryan Payment
Bryan Payment
1,714 Points

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
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.

Bryan Payment
Bryan Payment
1,714 Points

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

Bryan Payment
Bryan Payment
1,714 Points

Thank you, I'll look over this info.