Printing an activity

I print copies of my activities for my walking log. Just recently, the print has started to include the menu sidebars, which it didn't before (see before and after examples attached). Is there any way I can exclude these?After.pdf before.pdf

0 trux 2 days ago

Try a different browser. I just tested it with Chrome and Edge (on Win 11), and they both print just the main frame, without the menu.

0 morganbrg 1 day ago in reply to trux

Thanks Trux. My default browser is Safari on Mac. I've just tried with my secondary browser (Firefox) but it's still printing the headers and menu as well as the main frame.

0 trux 1 day ago in reply to morganbrg

Try Chrome

0 morganbrg 1 day ago in reply to trux

Exactly the same result I'm afraid

0 trux 1 day ago in reply to morganbrg

You are afraid before trying or after it? It works as expected in my Chrome.

0 morganbrg 1 day ago in reply to trux

I have downloaded Chrome and opened Garmin Connect using it. Same result. Maybe it's because I am on Mac rather than a Windows pc

0 trux 1 day ago in reply to morganbrg

Do you get the same result when printing from a browser on your phone, instead of the Mac?

0 morganbrg 1 day ago in reply to trux

I've tried with both iPad and iPhone but then it only prints part of the information and the text overlapsiPhone print.pdf

0 trux 1 day ago in reply to morganbrg

There is also a way you can find out whether there is a problem in the HTML of the page, or rather in your browser or computer (or perhaps some plugin / anti-spam filter, etc):

Open DevTools: press F12 (or Cmd + Option + I on Mac)
Open the Command Menu search bar: press Cmd + Shift + P (Mac)
Search for Rendering: type Rendering into the box and select Show Rendering from the dropdown. This will open the Rendering tab at the bottom of your DevTools window.
Emulate print: scroll down in the Rendering panel until you find the "Emulate CSS media type" dropdown. Change it from 'No emulation' to 'print'. The browser main window reloads as if you were printing, and normally the navigation containers disapear.
On the Elements tab of DevTools search for the main navigation controller: Ctrl + F and search for nav[class*="main-nav"]
Click on the element and check the CSS. It should show @media print ... "display:none" near the the top. If it is there, the there is indeed a problem on the computer not obeying the CSS. If it is not there, there is something preventing the full loading of the CSS.

Alternatively, and simpler, if you do not want to mess with analyzing the CSS, you can just disable the navigation container manually before printing:

Open the DevTools as in #1 above and go directly to #5 (do not bother about the rendering options). On the right side, under Styles, add the line "display:none". It removes the navigation bar.

As for the overlapping when printing from the phone or ipad, that could be possibly fixed by adjusting the scaling or zoom factor of the page.