CODEWITHSUNDEEP
zurb-foundation
CookieEater
CookieEater

Reputation: 2496

Zurb Foundation 4 How to maintain columns when printing

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

For example, 

<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 renders as enter image description here

but it becomes this when printed.

enter image description here

Is there a fix to this so that the grid layout is maintained?

Upvotes: 4

Views: 1926

Answers (3)

Ryan
Ryan

Reputation: 5026

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

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

Upvotes: 0

Bet Lamed
Bet Lamed

Reputation: 483

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

foundation/_variables.scss:98

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

foundation/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 foundation/_variables.scss is included that 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 auto-include all of foundation by way of @import "foundation", but instead include all of them manually (i.e., uncomment the respective lines in _foundation.scss).

Upvotes: 1

Chris G-Jones
Chris G-Jones

Reputation: 626

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;
  }
}

Upvotes: 2

Related Questions