Menu
I would like to design a report page with a different layout for printing to mobile. I am using bootstrap v3. It seems the grid can't differentiate between the two as the breakpoint for printing is the same as the breakpoint for mobile (xs)
For example: In the below test html my printed page (or print preview) shows the xs6 columns side by side but the sm6 columns stacked. There isn't a breakpoint between xs and sm.
Surely my printed page is wider than my mobile viewport so shouldn't it use the sm layout?
Am I doing something wrong or is this the way it is? Is there a defined viewport width for printing?
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6"> xs6 </div> <div class="col-xs-6"> xs6 </div> </div> <div class="row"> <div class="col-sm-6"> sm6 </div> <div class="col-sm-6"> sm6 </div> </div> </div> </body> </html> 
905
What I did was to manually recreate those columns classes in my print css.
.col-print-1 {width:8%; float:left;} .col-print-2 {width:16%; float:left;} .col-print-3 {width:25%; float:left;} .col-print-4 {width:33%; float:left;} .col-print-5 {width:42%; float:left;} .col-print-6 {width:50%; float:left;} .col-print-7 {width:58%; float:left;} .col-print-8 {width:66%; float:left;} .col-print-9 {width:75%; float:left;} .col-print-10{width:83%; float:left;} .col-print-11{width:92%; float:left;} .col-print-12{width:100%; float:left;} Then I just use those classes like I use bootstrap classes to make my columns for print only. I also created .visible-print and .hidden-print to hide/show elements only in the print version.
It still needs some work, but that quick patch helped me a lot.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
