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

Owa Aquino
Owa Aquino
19,277 Points
Posted by Owa Aquino
Owa Aquino
19,277 Points

media query on Sass

Hi guys!

I'm styling a project and using Sass framework for it. Somehow my media query doesn't work. I created a variables in a different file named 

$desktop-breakpoint : '(max-width: 1024px)';

Then I want to use that variable as a break point in my media query for my header styles and display it to none.

#main-header {

    text-align: center;
    padding: 5em 0;

    color: $goldenbar;

        @media #{$desktop-breakpoint}{
            display: none;
        }
}

When I check this out to the browser the main-header is still displayed. Hope you can help me out. Thank you very much.

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Are you sure, cause it's working here, and I didn't change your code: http://codepen.io/kevink/pen/KroWmV

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

I see it now. The problem is the break point it self I think I should have make it min-width than max-width.

Thanks Kevin!

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Ahh, got it. Sweet man!