Google Chrome

How to Fix Google Chrome extra blank page Print Problem – Browser CSS FIX

As all of you know, Google Chrome is a most reliable and fast browser. Google developed this freeware web browser. This Well-known browser is written in C++. Google Chrome has the ability to print webpages like other web browsers. There are many advantages to use this fast browser but few bugs can waste our time. Let’s talk about it in detail.

I was working on a PHP based project few days ago and wanted to print the webpage. I used Google Chrome browser to print the webpage but I was getting an extra white blank page at the end of the document. It was very annoying because I wanted to print the webpage as a document. I struggled very hard to change the settings of Google Chrome browser but nothing worked. I tried to browse the Google to find a fix and It took one hour to find the correct solution.

Google Chrome

The solution was very simple and straightforward. I fixed this problem or error after adding few lines in the media query CSS. I was familiar with the advantage of Media queries to create a Responsive website. I wasn’t sure how to use the Media Query for removing the extra blank page. I found a great solution on Internet and some small codes in media query fixed the extra blank page while printing. I’m going to mention those codes below so that it can save your day.

Media Query CSS for Google Chrome:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    line-height: 1 !important; /* Chrome- removes extra blank page at the end*/
}

If you are not familiar the usage of Media query then don’t worry. I can tell you another alternative way to fix this issue. Simply add the below codes before closing the tag.

<style type="text/css">
* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    line-height: 1 !important; /*Chrome- removes extra blank page at the bottom*/
}
</style>

CONCLUSION: Usage of Media Query can fix the extra white blank page at the end of the document.

We hope that you found this post helpful. Share your best tips with us.

Keep Reading: CSS hacks for Firefox, Chrome, Safari and IE >>

Leave a Reply

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

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.