@media print display:none isn't working

Question

I have tried for over 3 weeks now with different implementations trying to get the right section to not display, and have the left section display at full width. Given that my research shows there is no easy or streamlined way to quickly render Print views without reviewing the print preview, I am asking for some help to figure this out.

the print media css that is not working is this:

#gc {
    width: 100%;
}
#asideTrack {
/*      width: 100%;*/
    display: none;
}
.asideTrack {
/*      width: 100%;*/
    display: none;
}
.slideAside {
/*      width: 100%;*/
    display: none;
}
#slideAside {
    display:none
}

Any suggestions?

Solution

In CSS lower rule overwrites the top if they have the same priority (depending on selector)

You write your common css not in @media block, and it is lower then your @media print block, so it overwrites your @media print styles. For example, it is cause why in print preview your left block has width 74% (because this rule is lower then rule of @media print block where you say it is 100%).

I hope it is helpful.

Solutions

1. In your css file you may place media print block to the end of file.
2. Add !important directives to some rules in media print block. ie: p { color: red !important; }
3. Place your special css for screen in media screen block.