• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

262

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

Community Expert , 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

 

Votes

Translate

Translate
Community Expert ,
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.

Votes

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

Votes

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.

Votes

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