More concise CSS print rendering for the Flat WordPress theme

The Flat template is—in my opinion—a simple and elegant WordPress template.

Still, when printing blog pages, the output contains a large amount of whitespace.

CSS Customization

Using the template customization feature of WordPress, I adjusted the CSS of the Flat template to suit my needs.

The following CSS fragment is a suggestion for producing a more concise print rendering using the Flat WordPress theme.

@media print {
  .site-info, .entry-meta, .nav-links, .tags-links, a::after, #bit, .fa {
    display: none;
  #masthead .site-title, .hentry .entry-title {
    font-size: 30px;
    font-family: Handlee;
  #masthead .site-title {
    padding-bottom: 0px;
  .post {
    padding-top: 0px;
  .hentry .entry-content {
    padding-top: 0px;
  h2 {
    font-size: 24px;
    margin-top: 5px;
  table.easy-table {
    max-width: 90%;
  .easy-table th, .easy-table td {
    padding-top: 1px;
    padding-bottom: 1px;


I tested the print template live inside Firefox using the Developer Toolbar (Tools → Web Developer → Developer Toolbar) and the command media emulate print.

Chromium also offers a similar functionality in the Developer Tools (Ctrl+Shift+I) → Menu → More tools → Rendering → Emulate CSS media.