Print friendly design

Forum|Forum|5 years ago
December 14, 2020
3 replies
465 views

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

This topic is closed to new replies. Start a new post to keep the conversation going.

Correct answer Nancy OShea

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

Nancy OShea

Correct answer

Community Expert

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

Nancy O'Shea— Product User & Community Expert

M

Marcus1587Author

Inspiring

While this was the closest answer to what I came to think the easiest way to facilitate printing, I chose to use @217338 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.