Menu icon Foundation
Printing Foundation 5

HI, I've found a heap of solution for forcing the class large to be used instead of small when printing but the all concern SCSS and I'm using CSS and can't work out how to convert it, can anyone help?

here is the SCSS code

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

thanks

printinglargesmallscsscss

HI, I've found a heap of solution for forcing the class large to be used instead of small when printing but the all concern SCSS and I'm using CSS and can't work out how to convert it, can anyone help?

here is the SCSS code

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

thanks


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Howdy everyone!

This is the CSS based on the information Chris has given.

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

This post has been closed. No new replies can be added.

Wing-Hou Chan over 5 years ago

Howdy everyone!

This is the CSS based on the information Chris has given.

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

Effe over 5 years ago

Would be nice to know how to do w/o SCSS

Jeffrey Peck almost 5 years ago

Thank you so much! Super-useful and works perfectly. Also wondering if there's a way to reduce the padding / spacing on all elements easily so the pages print in a more compact fashion?

Thanks again.