Printer friendly pages

I would like to give site users the ability to print specific pages without all of the page elements in a print friendly way.

This is the type of page I am working with.

This is the CSS code I am working on:

@media print {
@page { margin: 1in 1in 1in 1in; }
header.tc-header { border: none; }
a.site-logo { display: block; }
div.navbar-wrapper { display: none; }
div.navbar-inner { display: none; }
div#text-9 { display: none; }
div.breadcrumb-trail.breadcrumbs::before { content: url('https://www.aumc-alliance.org/wp-content/uploads/2014/05/aumc100.png'); position: absolute; top: 0; right: 0; }
div.breadcrumb-trail.breadcrumbs { display: block; }
div.entry-content .noprint { display: none; }
div.entry-content .row-fluid .span6.offset3 { display: block; }
div.entry-content::after { content: "MY CUSTOM MESSAGE"; }
footer#footer { display: none; }
}

This code does provide a usable print-out, however the text is too small (only tested in Chrome so far). This code is not currently contained in my child stylesheet…if this is necessary to troubleshoot/help, let me know.

I am struggling with changing the inherited and custom styling of the elements I want to include in the final printed page. I have tried numerous iterations and none of the changes work.

My ideal goal:
1. Include site logo – upper left
2. Add website QR code – upper right
3. Include breadcrumb trail – 12pt black text
4. Include boxed content – remove border, 12pt black text aligned left, allow text to fill page and wrap accordingly
5. Add custom message – 12pt black text

Additionally, I would like to be able to limit this print styling to either the grandchildren of a single page id or the children of 12 separate page id’s (because there will be 365 individual pages total).

Any assistance would be greatly appreciated. If I am doing it all wrong…let me know that too.

Thank you.