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

HTML

Posted by Joshua Harris
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

Is there something wrong with workspace?

I've been consistently having the same problem within workspaces. Im doing the how to make a website with nick petit, and there are certain points when i follow the instructions exactly and my code is entirely correct, yet workspace doesn't produce a change. Even after refreshing the page or reopening, it doesn't apply the changes to the front end. However, within 24 hours to few days later, the changes will miraculously appear. At this point though I've lost hours of time looking for solutions to the problem and checking my code to make sure it wasn't me. It has happened about four times and I've had other members confirm via the forum every time that it wasn't my code that was the problem. At the moment I'm doing the responsive web design and testing, and I've added the responsive.css file and the necessary code to make it change from navy to dark green when widening or compressing the screen size. When visiting the front end, once again workspaces produces no results. It has been about an hour since i added that code in. I am using a macbook pro 2015 running OSX and using google chrome. So is there something going wrong within workspaces and if so how can i fix it?

Here is my entire code from my index.html, main.css and responsive.css:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Josh Harris - Web Design</title>
    <link rel="stylesheet" href="CSS/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Orbitron|Exo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="CSS/main.css">
    <link rel="stylesheet" href="CSS/responsive.css">
      <style>
        a {
  text-decoration: none;
}

#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}

    </style>
  </head>
  <body style="background-color: white;">
    <header>
      <a href="index.html" id="logo">
        <h1>Josh Harris</h1>
        <h2>Web Design</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> Blending modes</p>
          </a> 
         </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p> Experimenting with colors</p>
          </a> 
         </li>
          <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p> 80's style</p>
          </a> 
         </li>
       </ul>
       </section>
      <footer>
        <a href="http://facebook.com/josh.harris.73700"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
       <p>&copy; 2015 Josh Harris.</p>
      </footer>
    </div>
  </body> 
</html>

/***************************
GENERAL
****************************/

body {
  font-family:'Slabo 27px', sans-serif;
}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/***************************
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: 'Orbitron', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 2em;
  text-align: center;
}

h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.75em;
  margin: -5px 0 0;
  font-weight: normal;
  text-align: center;

}


/***************************
NAVIGATION
****************************/

nav {
  text-align: center;
  padding; 10px 0;
  margin: 20px 0 0;
  font-size: 1.5em;

}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
   display: inline-block;
}

nav a {
  font-weight: 700;
  padding: 15px 10px;
}
/***************************
FOOTER
****************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 30px;
  height: 30px;
  margin: 0 5px;

}
/***************************
PAGE: PORTFOLIO
****************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left; 
  width: 45%;
  margin: 2.5%;
  background-color: red;
  color: #bdc3c7;

}

#gallery li a p {
  margin 0;
  padding 5%;
  font-size 0.75em;
  color: #bdc3c7
}

/***************************
PAGE: ABOUT
****************************/

.profile-photo {
  display: block;
  max-width: 400px;
  margin: 0 auto 30px;
  border-radius: 25px;
}

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

/***************************
COLORS
****************************/

/* site body */
body {
  background-color: white;
  color: #999;
}

/* gold header*/
header {
  background: red;
  border-color: #ffffff;
}

/* logo text */
h1, h2 {
color: #fff;
}

/* nav mobile background color */
nav {
  background: red;
}

/* links */
a {
  color: red;
}

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: blue;
}



@media screen and (min-width: 480px) {
  body {
    background: navy;
  }
}


@media screen and (min-width: 660px) {
  body {
    background: darkgreen;
  }

}
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Can you use the mark down on your code? Adding 3 back ticks (```) at the beginning of the file and the language name in all lowercase (html, css) then ending the file with 3 back ticks will make it easier to read.

Eric Thompson
Eric Thompson
9,858 Points

Joshua, I am echoing what Caleb said. Could you please read this:

https://teamtreehouse.com/forum/posting-code-to-the-forum

and re-post your code with the mark down on your code? It makes it much easier for others to follow your code.

Joshua Harris
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

fixed this problem last night sorry for the late reply to your answers. I really appreciate it!

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Joshua Harris, I've modified your original question to properly format the code.

Can you also please post as answer to your own question, the solution to your problem, just in case anyone else is having a similar issue, and then we can 'close' this question too.