How to make a blog post or webpage printer-friendly by hiding elements?

Learn how to make a webpage print friendly and clutter-free using CSS Stylesheet by hiding unwanted page elements using "@media print" tag.

Recently, I was trying to print one of my blog posts but, it was not appearing quite aligned. There were few elements which appear either broken or not proper in the print preview mode.

I thought of hiding the elements that are not necessary for print. So I disabled the top navigation bar, footer widgets, social links, and few other items that I felt useless in print format.

Hiding the element was super easy, and it does not effect on the actual website looks. The changes will be only applicable when we give a print command.

All you need is access to CSS stylesheet that’s used for front-end designing, and a browser with developer mode (I personally use Chrome browser). I’m using WordPress CMS, and it has a very simple yet powerful editor for editing CSS file within the browser.

Let’s get started with the demo and procedure, I think you are already set with the pre-requisites mentioned.

How to make a webpage printable using CSS?

I believe every CMS has some or the other way to edit the CSS stylesheet file. For WordPress CMS, access the Editor option under the “Appearance” tab.

At the end of all the existing code, copy-paste below snippet.

.... some existing code...
@media print {
}

Next steps to find the element class to be hidden. Let me take the really simple example of hiding the social share bar.

Step 1: Go to any blog post and hover the mouse on the “share-bar” icons.

Step 2: Right-click and select the option “Inspect element”. The developer options will be invoked, and a small window will be appearing.

Step 3: Select between the line of codes under the “Elements” tab such that the entire share-bar is highlighted on selection. [click to view full screen]

Element Selections in Developer mode in chrome

Step 4: Note down the class of the selected share-bar. Let say it appears as <div class="sharrre-container">...

Step 5: Copy the class and paste it into the mentioned snippet code with the display element set to none.

Step 6: Hit on the “Update” button, and watch the changes effect on the live site by hitting a print command.

Blog article webpage printer friendly

In above example, the final code after adding the “sharrre-container” class should look like:

... some existing code...
@media print {
         .sharrre-container {
               display:none;
         }
}

Make sure that @media print has it’s own opening and closing curly brackets { ... }. Also, each class has its own curls.

Similarly, you can inspect all other elements and hide the unwanted widgets from appearing in the printable format.

The final output will be available once you update the CSS code, hard refresh the blog post, and try to print the webpage again.

Video on how to make webpage printer friendly

I know the above code snippet sounds quite complicated but, it’s not. However, make it understand easily I’ve captured a part of screencast on hiding the YouTube video whitespace.

I hope the video helped with understanding the basics. In a similar way, you can actually inspect other elements, and hide it using display: none; tag.

What your thought on this?

I personally added the code snippet and hidden all unnecessary element class and div to make my blog printer-friendly.

You can even try Cmd+P (in Mac OS) or Ctrl+P (in PC) to see how this post appears in print preview mode. And feel free to print and save it as a password protected PDF file in your local machine.

Drop in below comments if you are facing any challenges, happy to help!

If you've any thoughts on How to make a blog post or webpage printer-friendly by hiding elements?, then feel free to drop in below comment box.
Also, please subscribe to our restoreBin YouTube channel for more important updates. Cheers!

Share
Hey there, I hope you doing awesome! I’m Kushal Azza, a certified digital analytics professional, technophile, a blogger & your host at @restoreBin

Leave a Reply

Your email address will not be published. Required fields are marked *