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 Text Shadows and Box Shadows

Taurey Butler
Taurey Butler
5,442 Points
Posted by Taurey Butler
Taurey Butler
5,442 Points

My css works for the preview but it gets graded as incorrect.

.main-header { box-shadow: 0px 2px 15px #aaa, 0px 0px 60px 5px firebrick; }

I don't understand why this isn't correct even though it works in Preview Mode.

style.css 
/* Complete the challenge by writing CSS below */
.main-heading {
  text-shadow: 0px 0px 5px #be7b31;
}

.title {
  text-shadow: 1px 3px 0px #e59740;
}

.main-header {
  box-shadow: 0px 2px 15px #aaa,
              0px 0px 60px 5px firebrick;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>
Rasmus Ørum Bruus
.a{fill-rule:evenodd;}techdegree
Rasmus Ørum Bruus
Front End Web Development Techdegree Student 2,915 Points

Hi Taurey,

I think your missing "inset" in the second box-shadow for the .main-header. It should be a inner shadow.

Regards Rasmus

Taurey Butler
Taurey Butler
5,442 Points
Taurey Butler
Taurey Butler
5,442 Points

Hello Rasmus,

Thanks for your answer. However, I think there is something strange going on because I'm pretty sure that I used "inset" even though the code doesn't show it. Also, I've re-tried the exercise another 5 times (definitely with "inset") and still haven't gotten it to work. I'm going to send a screenshot to Treehouse. Thanks for taking time to help me!

Taurey

2 Answers

Tony Nguyen
Tony Nguyen
24,934 Points
Tony Nguyen
Tony Nguyen
24,934 Points

Hey Taurey,

Yes, the code will work. However the question is also expecting the 2nd box shadow to be "inset" according to the question.

.main-header {
  box-shadow: 0 2px 15px #aaa,
              inset 0 0 60px 5px firebrick;
}
Taurey Butler
Taurey Butler
5,442 Points
Taurey Butler
Taurey Butler
5,442 Points

Hi Tony, Thanks for your reply. Unfortunately, I'm still having trouble getting passed this challenge. I've tried the exercise numerous times yet it still won't recognize the CSS as correct. I've even pasted your CSS into the exercise but I get the same result. I'm going to send a screenshot to Treehouse and see what they have to say. Thanks for taking the time to help me!

Taurey

Tony Nguyen
Tony Nguyen
24,934 Points
Tony Nguyen
Tony Nguyen
24,934 Points

Sorry for the delay,

Make sure that your entire answer is as follows:

.main-heading {
 text-shadow: 0 0 5px #be7b31;
}

.title {
 text-shadow: 1px 3px 0 #e59740; 
}

.main-header {
 box-shadow: 0 2px 15px #aaa,
             inset 0 0 60px 5px firebrick; 
}

If it still continues not to work, I highly recommend that you try another browser to see if this will make it pass. Sometimes this happens to me too. :)

Taurey Butler
Taurey Butler
5,442 Points
Taurey Butler
Taurey Butler
5,442 Points

Tony, Thank you so much! I tried you're code and it worked. Your code helped me figure out the problem. I used "0px" instead of "0". Once I changed every instance of "0px" to "0" it worked. Not sure why it works in Preview Mode but not in Treehouse's grading but at least I know now. You're snippet helped tremendously!

Tony Nguyen
Tony Nguyen
24,934 Points
Tony Nguyen
Tony Nguyen
24,934 Points

You're welcome! Anytime!

Gemz Nunn
Gemz Nunn
16,296 Points
Gemz Nunn
Gemz Nunn
16,296 Points

Hi Taurey, I'm having the same problem. It keeps telling me " Bummer! Make sure you're defining a second box shadow value. Did you include a comma between both values?" when I have already done this. Will report this to Treehouse too.

Taurey Butler
Taurey Butler
5,442 Points
Taurey Butler
Taurey Butler
5,442 Points

Gemz, thanks for posting too. It's nice to know that I'm not the only one going through this. Please let me know if you get a solution and I'll do the same.

Taurey Butler
Taurey Butler
5,442 Points
Taurey Butler
Taurey Butler
5,442 Points

Hello Gemz, Using Tony's code from above helped me figure out the problem. You can't use "0px", you have to use "0" with no units. Hopefully this works for you too.