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

Oliver White
Oliver White
3,580 Points
Posted by Oliver White
Oliver White
3,580 Points

Copy of the full CSS to compare mine with

Hello

I am 14 mins from the end of this course and I just knocked over a plant on my desk. I have cleaned everything up but I have accidently typed or deleted something and my background colours and images have vanished. I have checked the CSS in a validator and it says its fine - no errors found - I cant see what I have altered to repair the damage so I can carry on

3 Answers

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 Points
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 Points

Hey Oliver White 👋

Sorry to hear about that mishap! 😬

What course are you referring to? This was just posted in css. I'd be happy to take a look and see if there are completed files available.

Oliver White
Oliver White
3,580 Points
Oliver White
Oliver White
3,580 Points

Hello Travis Alstrand-

Not sure how the question got detached from the course - it is

https://teamtreehouse.com/library/enhancing-design-with-css/improving-spacing- - this is the video I was on ( is t his thie information you need ?)

So close to the end - silly not to spot the issue

Oliver White

-

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 Points
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 Points

Oh yes, I don't believe there is a "complete" or "final" CSS file associated unfortunately.

This was from the stage 4 folder and I think is the closest we'll get.

/* Web Fonts ----------------------- */
@font-face {
  font-family: 'Abolition Regular';
  src: url('../fonts/abolition-regular-webfont.woff') format('woff');
}

/* Base Styles --------------------- */
* {
  box-sizing: border-box;
}
html {
  font-size: 1.25em; /* 20px on most screens */
}
body {
  margin: 1rem;
  color: #454959;
  font: 300 100%/1.5 'Work Sans', sans-serif;
}
a {
  color: #cc4e13;
  text-decoration: none;
}
h1, h2 {
  font: 400 4rem/1.1 'Abolition Regular', Impact, Charcoal, sans-serif;
}
h1 {
  text-shadow: 1px 2px 3px rgba(0,10,30,.5);
}
h1::after {
  content: '\2193';
  display: block;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 1.25rem;
}
img {
  width: 100%; /* responsive images */
  border-radius: 10px;
}


/* Main Styles --------------------- */
header {
  padding: 10vh 1rem;
  margin: -1rem -1rem 1rem;
  background: url(../img/mountains.jpg) center / cover no-repeat #f3753b;
  background-blend-mode: multiply;
  color: white;
}
header, footer {
  text-align: center;
}
.title {
  letter-spacing: 1px 
}
main {
  max-width: 1000px;
  margin: 0 auto;
  hyphens: auto;
}
section {
  padding: 4rem 0;
  border-bottom: 1px dashed #9599a9;
}
#wildlife {
  padding: 20% 15%;
  border-top: 12px solid #f3753b;
  border-radius: 12px 12px 0 0;
  background: url(../img/bear.jpg) center / cover #454959;
  color: white;
  box-shadow: inset 0 0 20px 10px rgba(0,10,30,.8);
}
#wildlife a {
  color: #f7a27c;
}
.callout {
  display: block;
  width: 250px;
  padding: .25rem 1rem;
  border-radius: 20px/10px;
  margin: 1rem auto;
  box-shadow: 1px 2px 3px rgba(0,10,30,.5);
  background-image: linear-gradient(135deg, rgba(255,255,224,.8) 0%, rgba(250,100,50,.2) 50%), linear-gradient(#b40 0%, #d63 50%, #c51 51%, #e74 100%);
  color: white;
  text-align: center;
  font-size: 1.25rem;
}
.column:first-child {
  margin-bottom: 4rem;
}

/* Media Queries ------------------- */
@media screen and (min-width: 720px) {
  header {
    padding: 20vh 1rem;
  }
  h1 {
    font-size: 5rem;
  }
  h1::after {
    margin-top: 1rem;
  }
  .title {
    font-size: 1.25rem;
  }
  .intro {
    padding: 0 15%;
    font-size: 1.1rem;
  }
  .column {
    display: inline-block;
    width: 48%;
    margin-right: -4px;
  }
  .column:first-child {
    margin-right: calc(4% - 4px);
    margin-bottom: 0;
  }
}
Oliver White
Oliver White
3,580 Points
Oliver White
Oliver White
3,580 Points

Hello Travis

Thanks so much for this

I copied it over and was still getting the same issue no styling , then I compared it to my own CSS and the files were identical !!

So I looked around and notice somehow I had managed to drag the CSS file into the fonts folder !!!! --- no wonder all styling had gone ! ha ha

Thanks for all the help , I should have spotted this error sooner !

Oliver White