Menu icon Foundation
Print Specific Styles

Looking for a recommendation. My client would like a list (table) view of search results, but would like to be able to select certain results and print them. Twist: they want them formatted differently. They'd like the printed styles to be more like a block-grid look. What would be the best way to do this?

printlist viewblock grid

Looking for a recommendation. My client would like a list (table) view of search results, but would like to be able to select certain results and print them. Twist: they want them formatted differently. They'd like the printed styles to be more like a block-grid look. What would be the best way to do this?

Rafi Benkual about 4 years ago

You can create a print stylesheet which you add when printing.

You can override the grid within a media query

@media print {
  .large-1 {
    width: 8.33333%;
  }

  .large-2 {
    width: 16.66667%;
  }

  .large-3 {
    width: 25%;
  }

  .large-4 {
    width: 33.33333%;
  }

  .large-5 {
    width: 41.66667%;
  }

  .large-6 {
    width: 50%;
  }

  .large-7 {
    width: 58.33333%;
  }

  .large-8 {
    width: 66.66667%;
  }

  .large-9 {
    width: 75%;
  }

  .large-10 {
    width: 83.33333%;
  }

  .large-11 {
    width: 91.66667%;
  }

  .large-12 {
    width: 100%;
  }
}