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 CSS Basics (2014) Enhancing the Design With CSS Transparent Gradients and Multiple Backgrounds

Amy Jones
Amy Jones
1,454 Points

I've managed to break my CSS and I don't know how to fix it.

I was following along per usual in the Transparent Gradients course and as we were applying the gradient on top of the photo in the header, I saw everything on the page change. I've somehow broken my CSS and things look wonky. Ran it through the CSS validator and tried to determine the error, but am not seeing it.

Not sure if y'all can see this: http://port-80-mf1l8pwy7z.treehouse-app.com/

/* Base Styles -------------------- */

* {
  box-sizing: border-box;
}

body {
  color: #878787;
  margin: 0;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {  
  font-size: 5.625rem; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
  text-shadow: 0 1px 1px black;
/*
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
*/
}

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 .5em; /* 0 0 26px */
}

h3 {
  font-size: 1.25em; /* 20px/16px  */
  color: #48525c;
  line-height: 1.2;
  margin-bottom: 1.7em; /* 34px */
}

img {
  max-width: 100%;
  margin-bottom: 20px;
  border-radius: 10px
}

ul,
ol {
  margin: 30px 0;
}

li {
  margin-bottom: 10px;
}

/* Pseudo-classes ------------------ */

a:link {
  color: rgb(255, 169, 73);
  text-decoration: none;
}

a:visited {
  color: lightblue;
}

a:hover {
  color: rgba(255, 169, 73, .4);
}

a:active {
  color: lightcoral;
}

/* Main Styles --------------------- */

.main-header {
  padding-top: 170px;
  height: 850px;
  background: #ffa949 url('../img/mountains.jpg') no-repeat center;
  background-size: cover;


.title {
  color: white;
  font-size: 1.625rem; /* 26px/16px */
  }

.intro {
  font-size: 1.25em; /* 20px/16px */
  line-height: 1.6;  
}

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
    padding-top: 25px;
  padding-bottom: 95px;
}

.secondary-content {
    padding-top: 80px;
    padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}

.callout {
  font-size: 1.25em;
  border-bottom: 3px solid;
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

.main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: 10px solid #ffa949;
}

.t-border {
  border-top: 2px solid #dfe2e6;
}

/* Layout Styles ------------------ */

.primary-content, 
.secondary-content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 960px;
}

.wildlife {
  color: white;
  text-align: left;
  padding: 18% 24%;
  border-top: 10px solid #ffa949;
  margin: 105px 0 60px;
  background: #434a52 url('../img/bear.jpg') no-repeat center;
  background-size: cover;
  box-shadow: inset 0px 0px 50px 10px rgba(0,0,0, 1);
  border-radius: 10px;
}

/* Floated Columns ------------------ */

.resorts,
.tips {
  width: 46.5%;
}

.tips {
  float: left;
}

.resorts {
  float: right;
}

/* Float Clearfix ------------------ */

.group:after {
  content: "";
  display: table;
  clear: both;
}

5 Answers

Jeff Lemay
Jeff Lemay
14,268 Points

You are missing a closing bracket after your properties for .main-header.

EDIT: Take a look at the syntax coloring. In the code here, .title should be orange but it is gray, and its bracket is highlighted in a darked gray.

Greg Kaleka
Greg Kaleka
39,021 Points

Hi Amy,

Your .main-header rule is missing a closing curly brace.

Let me know if that fixes your problem!

-Greg

Amy Jones
Amy Jones
1,454 Points

Deep sigh You are correct Greg, it is fixed. I added the .arrow which I tried before but did not work. Now it seems to be working. I think I'm going to take up drinking.

Many thanks for your help with this! A

Greg Kaleka
Greg Kaleka
39,021 Points

Haha glad you got it working!

Coding is so, so tough in the beginning, because you'll keep running into stuff like this... It gets better as you get better!

Amy Jones
Amy Jones
1,454 Points

Thanks so much for the quick response Jeff and Greg. While you both were correct and I did add the curly bracket to close the .main-header and did adjust the parsing of the .title. Unfortunately neither have fixed the issue.

Greg Kaleka
Greg Kaleka
39,021 Points

Are you sure? I clicked on your link again and it looks fixed.

Maybe you also want that down arrow to be smaller? As of now you don't have any css addressing the arrow. You'll need a rule that targets the class .arrow, and set an explicit size for it. I'm sure Guil has gone or will go over this...

Amy Jones
Amy Jones
1,454 Points

Very kind of you to remind me, Greg. :-) I'll get there eventually. Appreciate having this forum to talk me off the ledge.