I've been racking my brain for hours trying to figure out why this isn't working. I have a Wordpress site where I'm attempting to hide the header, menu, and footer content from being printed. Within my theme's style.css file, there is a section located at the bottom known as @media print that contains all the print-specific styles. I attempted to include the following within this section:
#search-box-wrap,
#search-box,
#inner-header,
#site-heading,
#site-generator,
#header,
#menu,
#sidebar,
#footer {
display:none !important;
}
All of these ids correspond to the header/menu/footer div ids in my Wordpress site.
The stylesheet link is as follows:
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />Many sources online suggested removing the media parameter from the stylesheet link above (which I have done) because when you integrate the print styles with your regular stylesheet, you cannot simply use the media="screen" attribute...which makes sense, but I still can't understand why it's not working?
Despite adding the code to my style.css file, when I view Print Preview or use my Web Developer Toolbar to inspect Print-Only CSS Styles, the header/menu/footer sections are still visible. Can anyone assist me in understanding why this issue persists?