Print Friendly CSS

[siriusdesigngroup]

I’ve set up the following CSS in the “Additional CSS” (I’ve tried in my Child style.css too) and it has no effect on removing the unnecessary elements.

I’ve also reviewed the other threads, the suggested video, and tried the print plugins which just add a button. All I want to do is remove these elements. Another customer provided this code in a different thread even saying it worked for him.

What needs to be adjusted? Thank you

@media print {
.x-masthead {display:none !important;}
.x-colophon {display:none !important;}
img {max-width:50% !important;}
.wp-caption {
border:0px !important;
text-align: left !important;
}
}

[christian]

Hey @siriusdesigngroup,

I pasted the code you posted in Theme Options > CSS in my test site and it works.

This means that the problem is only on your end. If a CSS doesn’t work, there usually is a syntax error before the working code.

Please check all your custom CSS in sites like http://csslint.net/ and fix the errors.

There’s no problem with the code you posted nor our theme.

Thanks.

[siriusdesigngroup]

Thank you for the prompt reply.

I’ve used csslint.net to correct all errors, tested with all plugins deactivated, and switched the child-theme off - all had no effort. The print code still does not work.

What else is causing the issue?

Thank you

[benursal]

Hi @siriusdesigngroup,

The actually does work. Here’s the difference between having the .x-colophon{display:none !important} code and not having it.

With that code

Without it

So it does work in hiding the footer. The issue is with the .x-masthead part of the code. I would suggest you make this change to your entire code:

@media print {
.masthead, .x-masthead {display:none !important;}
.x-colophon {display:none !important;}
img {max-width:50% !important;}
.wp-caption {
border:0px !important;
text-align: left !important;
}
}

Tell us if that works. Thanks.

[siriusdesigngroup]

Thank you very much, that did work.

I have two additional questions I would greatly appreciate feedback on.

Is there a way to over ride the Lazy Load and have all images display for printing?
And is there a way to improve the text formatting - i.e. reducing white space to condense it?

Thank you

[ruenel]

Hello @siriusdesigngroup,

Thanks for updating in!

Perhaps this link might help you:

• https://stackoverflow.com/questions/43707762/how-to-lazy-load-images-and-make-them-available-for-print

To reduce white space, you might want to add this in your @media print css:

.entry-wrap p {
    margin-bottom: 10px;
}

Hope this helps.