When the printing from wordpress child theme is not working

I wanted to allow a PDF download on my blog. Unfortunately this turned out to be complicated for multiple problems including WP and browser caching, CSS failure and mPDF misdirection. Here are the solutions.

Issue 1: If you are editing the print.css but the browser shows the old version: Comment out or delete the reference to parent in child css

/*
Theme Name: Twenty Twenty Child 1
Theme URI: http://wordpress.org/themes/twentytwenty
@import url('../twentytwenty/style.css');
*/

and include versioning in header.php

function my_theme_enqueue_styles() { 
  wp_enqueue_style( 'twentyfourteen', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'twentyfourteen-child1', get_stylesheet_directory_uri() . '/style.css',  array(), filemtime(get_template_directory() . '/style.css'), false );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Issue 2: css editing is applied but printing is still not correctly formatted, possible due to higher specificity of formatting instructions in the parent theme.

Solution: This is a bit tricky as it needs try and error to find the offending element. Chrome can show the print version in the browser as shown on this SO thread

https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode

Then add the important flag to the specific css rule..

@media print {
   .myelement1 { display: none !important; }
}

Issue 3: mPDF pulls the screen not the print version. Solution: Create an own mpdf media tag.

@media mpdf {
  #sidebar, #header {
    display:none !important;
  }
  blockquote, table, pre {
    page-break-inside:avoid !important;
    font-size: 0.7em  !important;
  }
}