WebPage Printer-Friendly: How to hide unwanted Elements?

You can make a webpage printer-friendly using CSS Stylesheet by hiding unwanted elements with "@media print" tag set the display: none styling.

Recently, I was trying to print one of my blog posts but, it was not appearing quite aligned. There were few elements that appear either broken or not proper in the print preview mode. Hence, I thought of making the webpage printer friendly by hiding unwanted elements.

That’s when I disabled the top navigation bar, footer widgets, social links, and a few other items that I felt useless in print format.

Hiding the element was super easy, and it does not affect the actual website looks. The changes will be only applicable when we give 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 files 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.
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 effect of the changes on the live site by hitting a print command.
Blog article webpage printer friendly

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

... some existing code...
@media print {
         .sharrre-container {

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.

How to make a webpage printer friendly using CSS "@media print" tag?

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 did you think about 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 WebPage Printer-Friendly: How to hide unwanted Elements?, then feel free to drop in below comment box. If you find this article helpful, please consider sharing it with your network.

Also, please subscribe to our restoreBin YouTube channel for helpful videos.

Disclosure: This page may contain affiliate links, which means we may receive compensation for your purchases using our links; of course at no extra cost to you (indeed, you may get special discounts). This will support our effort to create more useful content, and keep it open and free forever.

Leave a Reply

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