1

I have added some @media print queries to a stylesheet to try to make the content more attractive and useful if printed out (typical stuff: remove navbar, interactive features, print links). It is working how I want on Chrome, but not on Firefox and Safari. (I'm taking about pages like this).

The rules I've written to not display certain material, but the grid layout behaves differently:

Firefox

Print CSS from Firefox

Chrome

Print CSS from Chrome

The additional @print styles are being applied to both, but Chrome reproduces the layout without any of the other media rules being applied (so it appears in one column---which is what I would like); Firefox does not.

I suspect my question is as much about Bootstrap as it is about @print queries per se. But before I start writing @print rules to try to reset Bootstrap's layout, is there something else I should understand about how browsers construct a page for print? Is there a simple solution to ensure other browsers produce something that looks like Chrome?

cforster
  • 577
  • 2
  • 7
  • 19

1 Answers1

1

After some additional poking around, and finding this question it seems as though Chrome sets the page width for printing to smaller than 768 pixels, so that Bootstrap uses the xs styles. This issue discusses it at length.

I liked the (perhaps odd) behavior of Chrome; to secure it on Firefox requires rewriting the bootstrap rules. What I came up with is something like this:

@media print {
 .col-sm-1,
 .col-sm-2,
 .col-sm-3,
 .col-sm-4,
 .col-sm-5,
 .col-sm-6,
 .col-sm-7,
 .col-sm-8,
 .col-sm-9,
 .col-sm-10,
 .col-sm-11,
 .col-sm-12 {
    float: none;
    width: 100%;
 }
}

I'm not sure how wise a solution this, but it seems to be working.

Community
  • 1
  • 1
cforster
  • 577
  • 2
  • 7
  • 19