Zurb Foundation 4 How to Save Columns When Printing

Question

I am using Foundation 4.2.3 from Zurb, but when I print pages, grid layout is not always supported.

For instance,

<div class="row"> <div class="small-3 columns"> XXX </div> <div class="small-9 columns"> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div> </div> 

This displays how

but when it is printed it becomes like that.

Is there a fix for this to keep the grid structure?

Answer 1

I added this to my .scss file at the end:

 @media print { div.columns { float:left!important; padding-left:0.9375em!important; padding-right:0.9375em!important; width:8.3333333333%!important; } } 

Answer 2

The problem is that the ".large-XXX.columns" in the grid is only defined for the "@media screen":

base / _variables.scss: 98

 $small: "only screen and (min-width: #{$small-screen})"; 

base / components / _grid.scss: 153

  @media #{$small} { @for $i from 1 through $total-columns { .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); } } ... } 

So what I did was add a line after the /_variables.scss property is enabled, which overrides this:

 // This includes all of the foundation global elements that are needed to work with any of the other files. @import "foundation/variables"; $small: "screen and (min-width: #{$small-screen}), print"; 

Of course, this only works if you don’t automatically include all the bases using @import "basics", but instead include them all manually (i.e. uncomment the corresponding lines in _foundation.scss).

Answer 3

I did this in the variables.scss file for Foundation 5, although it is not perfect.

 // $screen: "only screen"; $screen: "print, screen";