Menu icon Foundation
Print as shown for medium-up

I am using Foundation 5. I would like the page to print as it shown on screen at medium-up sizes, rather than the one-column stacked layout that seems to be standard. Any way to do this?

print

I am using Foundation 5. I would like the page to print as it shown on screen at medium-up sizes, rather than the one-column stacked layout that seems to be standard. Any way to do this?

Rafi Benkual almost 6 years ago

Rj,
The stacking behavior you're seeing from Foundation is expected behavior.

One of our engineers had responded to this question in an email. Here is the detailed explanation:

Mark Hayes

"While adding in print styles as a default may seem like a good idea, it does present some challenges. The biggest challenge is needing to keep the print-only stylesheet up to date with styles that "undo" styles that may not look good in a print-based layout. That could potentially make our print styles significantly larger and also make it more difficult for us to maintain. It's far simpler to progressively add in particular functionality to the print styles instead of enabling everything by default.

In terms of adding in support for maintaining columns when printing there is also an issue due to the multiple grid systems that may be in play. If someone has a reasonably complex layout we would need to be very specific about which grid layout to pay attention to when printing. Consider the following code snippet:

<div class="row">
<div class="large-4 small-6 columns">
...
</div>
<div class="large-8 small-6 columns">
...
</div>
</div>

When going to print this layout would be pay attention to the large or small grid? In that case it might make sense for you to simply override the default behavior for a particular grid system on print. For example you could force the large grid to be print friendly by adding in the following code to your project (note: I haven't tried battle tested this code, but hopefully it gets the idea across):

// This would make the large grid function like a print grid
@media print {
  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: gridCalc($i, $total-columns);
    }
  }
}

Hope that clears things up!"

RJ Conway almost 6 years ago

Thank you for your reply, Rafi.

If I wanted to adapt the suggestion to Foundation 5 and force medium layout to print for all pages in a site, would this work?

@media print {
  @for $i from 1 through $total-columns {
    .medium-#{$i} {
      width: grid-Calc($i, $total-columns);
    }
  }
}

Would I place this code in my custom.scss file?

aceman almost 6 years ago

One of my customers also wants to use medium layout for printing.
I am using Foundation 5.1 and tried to add the code RJ Conway posted.
But it does not work for Grid-columns. They still get stacked.

How can we do this? Please help, i really need it.

Thanks in advance.

Effe over 5 years ago

Bump..

Arjan Oosthoek about 4 years ago

I'm having the same problem as aceman. I've tried the code Mark Hayes suggested, but nothing happens.