Print friendly design

[Marcus1587]

I have a responsive web designed page. It changes from two colums to one column for small devices. I need to make the web page print friendly. I understand about using a separate CSS for print media and/or media queries. I can use that to turn off parts that I do not want printed, e.g.. menus.

What I need help on is understanding how I can force the 2-column design to print as a single column. Basically I want it to look like it was designed for a small device.

FYI, I'm using Bootstrap 3.

Can you give me any suggestions on how to do this?

Cheers.

Marcus Libkind

[BenPleysier]

Have a look at this iscussion https://stackoverflow.com/questions/20243767/printing-page-with-bootstrap-3/20244712

[Nancy OShea · Accepted solution]

Go to File > Print Preview in your browser.

Bootstrap 3 already contains  CSS for print.  I'm pretty sure the default navbar is set to display:none.  However, if you need to remove other elements from print display, add the following Bootstrap class to your markup.

.hidden-print

[Marcus1587]

While this was the closest answer to what I came to think the easiest way to facilitate printing, I chose to use Media@mercycity.church print {} in the CSS to make changes for printing. I set display:none for objects that I didn't want printed and in one case changed overflow:auto to overflow:visible so that the entire object would be printed. Finally, for things like the copyright statement, that was part of a larger object, part of which I didn't want displayed, I set it to display:none and added another copyright with display:none for screen and display: visible for print. It looks very good now. Just need to clean up a few loose ends to make perfect. I found the above methods very easy to use.