Print friendly design

3 replies
477 views
Translate

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.

Nancy OSheaCorrect 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

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

Translate

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.

Translate

BenPleysier

Community Expert

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

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.