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

Felix Yakubov
Felix Yakubov
17,475 Points
Posted by 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
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
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
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