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 to Sass Refactoring with Sass Defining Media Queries

Posted by Dan Whiting
Dan Whiting
12,661 Points

My Main Header has dropped to the bottom of the page?

I can't figure out what happened and why 'Lake Tahoe' and the arrow are all the way at the bottom and what's going on here.

https://w.trhou.se/g1c7m89uyl

redcamel2
redcamel2
4,751 Points

Try min-width in your @media where its max-width.

Dan Whiting
Dan Whiting
12,661 Points

Tried the min-width and that didn't work.

redcamel2
redcamel2
4,751 Points

Could you just post the code into your answer bec the link isn't working anymore.

Dan Whiting
Dan Whiting
12,661 Points

https://w.trhou.se/jrcuqn38fe

my fault, the snapshot accidentally was deleted.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dan,

It looks like your issue is with the .main-title styling.

From _typography.scss:

&-title {
    @include text(1.625rem, 200, $color: $color-body);
    letter-spacing: .065em;
    border-bottom: 2px solid;
    padding-bottom: 10px;
}

Originally the 200 was supposed to be font-weight. However, you didn't specify that it's the weight when you passed it into the mixin. So it gets assigned to the 2nd argument of the mixin which is the line-height. This creates a really huge line-height (5200px) which pushes the span and h1 way down.

Specifying that it's the weight value should fix it.

@include text(1.625rem, $weight: 200, $color: $color-body);
Dan Whiting
Dan Whiting
12,661 Points

That was it! Thanks Jason!

redcamel2
redcamel2
4,751 Points
redcamel2
redcamel2
4,751 Points

Heres an idea, go to the video and click below the player downloads. Download it and copy his code into all your files.

Sometimes it is a easy fix.

If this helps pleases make this the best answer and tell us what was wrong.

Dan Whiting
Dan Whiting
12,661 Points

Well that worked in order to get the correct files, however, it didn't really fix my issue of why that happened.

redcamel2
redcamel2
4,751 Points

Post your new workspace please.