Menu icon Foundation
Custom print styling

Hello All,

 

I have a webpage which I need to print.

In Foundation 6 it by default takes the large screen layout to create a print view. 

However I need to do some cosmetic changes like- Font weight, Borders (because shadows don't work in print view) etc. How can I make these changes for print view only.

 

I tried "@include breakpoint(print){font-weight:normal}" but this does not works.. Any help appreciated. 

printmedia query

Hello All,

 

I have a webpage which I need to print.

In Foundation 6 it by default takes the large screen layout to create a print view. 

However I need to do some cosmetic changes like- Font weight, Borders (because shadows don't work in print view) etc. How can I make these changes for print view only.

 

I tried "@include breakpoint(print){font-weight:normal}" but this does not works.. Any help appreciated. 

PeterEmil 13 days ago

In the settings file you can change the breakpoint which will print:

$print-breakpoint: small;

You can create a separate partial which you can include in your app.scss or in the <head>.

@media print {

// print styles

}

Then style away.