Search code examples
cssprintingresponsive-designmediapreview

Responsive Site Blank Print Preview

I've tried everything I know to get our responsive site http://www.usalight.com to print. I've tried adding @media queries to our stylesheets like below:

@media print {
  * { 
    text-shadow: none !important;
    color: #000 !important; 
    background: transparent !important;
    box-shadow: none !important;
  }
}

I've tried adding a separate print.css stylesheet linked in our header like below:

<link rel="stylesheet" type="text/css" href="/css/print.css" media="print">

I've also added media="print,screen" to all our stylesheets to no avail. I don't get why I can't get anything to show up in print preview. Ideas?

Solution

  • It seems to have something to do with the fact that almost all your page is inside the .navbar-default div. Adding ending div tag before your #main-body id allows most of the page to print.