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 about 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.

Effe about 5 years ago

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

Wing-Hou Chan about 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%;
  }
}

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.