[Resolved] printout of webpage has mobile logo

[Stephen]

Hi, when I choose to print any page of my website from any browser the printout has my mobile screen size logo rather than my desktop screen size logo.

Can you tell me how to select my desktop logo to show on printouts ?

[Stephen]

The problem is my mobile logo has white areas which dont show on the printout, so I need my desktop logo to appear on printouts.

Thanks

[Fernando]

Hi Stephen,

The dimensions being printed is the mobile/tablet version of your site. Try scaling the print size to a smaller size so that the Desktop version is printed.

Example: https://share.getcloudapp.com/xQuwzprr

As shown, scaling it smaller fixes the issue.

Hope this clarifies!

[Stephen]

Hi Fernando, its not for my own printout, my customers sometimes print out pages with the logo on and the mobile logo does not work on a white background.

Maybe there is no way to fix this as its the browser which is making the printout from the website ?

[Stephen]

The mobile logo is a PNG file with no background so it has the same background as the header.

Can I set an extra background for just the mobile logo to match the header so when it prints out the logo has a background colour ?

[Fernando]

I see. We can try to use print-color-adjust to address the issue, and add the background-color set to the printout.

Can you try adding this in Appearance > Customize > Additional CSS?

	body {
  -webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

Kindly let us know how it goes.

[Stephen]

Hi, thanks for your help.

Its swings and roundabouts:

if I add the CSS then all the backgrounds print which is good for the logo but not good for the rest of the page
and without the backgrounds the logo looks odd.

Maybe best to stick with the logo looking odd !

Thanks
Stephen

[Fernando]

I see. We can also isolate the Logo.

For instance, try this CSS instead:

.site-logo {
  -webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
}

@media print {
		.site-logo {
			background-color: #000 !important;
	}
}

Kindly replace #000 with your preferred color code.

This code would add a background color specifically only to the site logo.

Hope this helps!

[Stephen]

Hi Fernando,

– that works perfectly, thank you 👍

[Fernando]

You’re welcome Stephen! Glad that worked!

[Author]

Posts