Print friendly design

Explorer ,
Dec 14, 2020 Dec 14, 2020

Copy link to clipboard

Copied

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

TOPICS
Bootstrap , How to , Other

Views

172

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Dec 14, 2020 Dec 14, 2020

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

 

Likes

Translate

Translate
Adobe Community Professional ,
Dec 14, 2020 Dec 14, 2020

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 14, 2020 Dec 14, 2020

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 22, 2020 Dec 22, 2020

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines