Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Felix Yakubov
Felix Yakubov
17,475 Points

@Media problems

I'm using this piece of code on my website to prepare it for print. But instead of applying only on print it applies on the desktop...Whats the problem?

/* Print Setup */
@media only print 
{
        * {background:transparent !important; 
           color:#000;
          box-shadow:none; text-shadow:none;
          }
    .x-topbar, img, .wf-box, .comments, footer {
    display:none;
    }

    *[class^="addthis"] { 
        display:none;
    }
}

www.agamy.co.il/blog

2 Answers

Zhihao Wang
Zhihao Wang
9,687 Points

Leave out the word "only" in your code and It'll work.

@media print{

/* Your Code Here */

}
August Fagelberg
August Fagelberg
2,080 Points

Have you tried leaving out the only in your media query? Syntax seems to be alright for me. The layout is a bit messed up but in general it seems to work when I look at the sites print preview in Chrome.

Felix Yakubov
Felix Yakubov
17,475 Points

Yes, that was my first option. Ive tried both. The media queries course said that "only" is good for old browsers and its ok to use it so I don't know whats the problem