Trying to print from a wordpress page - css

Question

I'm trying to make a wordpress page that grabs some dynamic content and puts in on a page that is ready for someone to easily print. There are two things that are getting in the way and some help would be great.
after pressing print initially in chrome the page looks a mess - overzoomed so it is incomprehensible. If i dial "scale" back to 60 it looks pretty much like the webpage. I've tried setting #media print scale to .6 but that seems to just shrink the messy view into the middle of the page. Any ideas?
initial messy zoom at 100%
if i take the zoom down to 60% perfect
some text on the page insists that it prints in black. no amount of alteration on the site will change that. it appears white on the web, prints in black. Any ideas?
thanks.
nick

Answer 1

Some text on the page insists that it prints in black, no amount of alteration on the site will change that. It appears white on the web, prints in black. Any ideas?
When printing, the Chrome browser applies its own styling to the page. On your page, the text is changing from white to a dark grey because Chrome is removing the blue element behind it. Without the blue element behind the white text, it'd just be white text on a white background, so Chrome has gone ahead and 'fixed' that for you so that it's readable.
If you're looking at the print settings in Chrome, you'll see a 'More Settings' option. If you open that, you'll see that Chrome has given the user the option to remove the background graphics as seen below.
By default, this button is unchecked in Chrome. This is a very intentional feature of Chrome that allows users to save ink when printing from the web. Browsers can do whatever they want when printing, so some things may simply be out of your control.
You can change the styling for the print page by using the #media CSS query. You still need to keep in mind specificity when using the #media query. If Chrome is ignoring one or more of your attributes, you can try using !important with whatever you're trying to change.
Example
#media print {
.my-class {
color: blue;
}
#my-id {
color: green;
}
.stubborn-div {
color: red !important;
}
}
You could also try this:
-webkit-print-color-adjust: exact;
When set to exact, the background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden. Note that support is extremely limited to what browsers can & will use it. See here.
After pressing print initially in chrome the page looks a mess -
overzoomed so it is incomprehensible. If I dial "scale" back to 60 it
looks pretty much like the webpage. I've tried setting #media print
scale to .6 but that seems to just shrink the messy view into the
middle of the page. Any ideas?
I've looked at your code enough that I really think it just comes down to you figuring out your responsive styling, and adding the necessary CSS to the #media query.

Answer 2

It's impossible to be sure about anything because you haven't posted a stitch of code. Have you tried setting
body{ height:100vh; width:100vw; }
?

Answer 3

Are you aware that there are "print styles"? I.e. you use the media query #media print { ... } in your CSS and there write CSS rules for everything that should be different in the printout.
You can for example change font sizes for classes, tags, or the whole body, you can change (text) colors, and you can even hide stuff in the printout, like menu bars and sidebars, by using display: none for these elements in the print styles.