Navbar covers content when printing articles - FCC News

[BenTechCoder]

Describe the Issue

Good evening, folks, I'm trying to print an article from the FCC News site to pdf and the navbar being position: fixed cuts off the first sentence of every paragraph on each page. (See screenshots and screencast)

Affected Page

https://www.freecodecamp.org/news/

Steps to Reproduce

1. Open any article on https://www.freecodecamp.org/news/
2. Right-click to open context menu and select "print"
3. Scroll through content and notice that there is content being cut off by the navbar on every page.

Expected behavior

When printing an article all content should be visible and readable. Currently there is content being covered by the navbar. I also expect the page to not have a footer or navbar in general when printing.

Screenshots

Screencast of bug report (onedrive link)

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

Possible Fix:

By using the @media print media query we could enable accurate printing for paper and pdf for news articles. Something that is very useful for the full-length books currently published on the site.

/* NEW FILE: assets/print.css */
/* https://github.com/freeCodeCamp/news/tree/main/src/_includes/assets/css */
/*
THESE STYLES ARE ONLY ACTIVATED ON PRINT MEDIA TYPE 
*/

.site-nav {
display: none; 
/* Can also be display:static if it's decided it should stay in print */
}

.banner {
display: none;
/* Can also be display:static if it's decided it should stay in print */
}

footer {
display: none;
/* Can be disregarded if it's decided footer should stay in print */
}

Enhancements

It would also be nice to implement the suggestions from this amazing article on making the web nice to print. Article

---

Thanks to the core team for their amazing work. FCC is truly a gem 😁

[Devansh422]

Can I work on this issue for Hacktoberfest?

This can easily be resolved through the media query

[majestic-owl448]

@Devansh422 Hi there,

Thanks for your interest in contributing.

This issue has not been triaged yet, and a solution has not been agreed upon. Once the issue is open for contribution, you are welcome to create a pull request to reflect the issue consensus. Please also note that we typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue.