Foundation 5 - Printing

Print a page exactly as it looks in large screen

I’m using Zurb Foundation. I’m trying to print a page exactly as it looks in large screen but everything get stacked and looks like a small screen?

Try the following to get nice pretty printing for your forms:

@media print {
  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: percentage($i / $total-columns);
    }
  }
}

And finally in the _settings.scss (around line #163) set the $screen value from “only screen” to “only print, screen”:

$screen: "only print, screen";

You can also force landscape mode for your printer by adding @page {size: landscape} to your code, or remove buttons by adding a class to the container, try this:

@media print {
  @page {size: landscape}
  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: percentage($i / $total-columns);
    }
  }
  .noprint, .printMsg {
    display:none;
  }
}

Finally, you could try adding some font spacing to make the form more readable:

.hideDiv {
  letter-spacing:.20em;
}

The resulting printed copy in PDF form (opens in new window) signatureDemoWebform.pdf