Help with @media print function

1

Hello,

Basically I am working on self extra credit on my project. I have completed the Technical Document Project and I have been trying for weeks how to print the page without the navbar (It only makes it worst that @media was a section of the Techinal Document).

I have tried these approaches:

  • display: none (no effect)
  • height: 0;
    width: 0; (no effect)
  • visibility: hidden; (gets rid of navbar, but doesn’t change anything else)
  • for .nav-link
  • same thing as above but visibility: hidden; had no effect
  • for #main-doc
  • I have tried everything above with and without the #main-doc listed with no effects. The list below were the parts that I have modified.
  • width: 100%;
    height: 100%; (no effect)
  • width: auto; (Note: I have tried mixing the 100%'s and auto’s and had no effect)
    height: auto; (no effect)
    +display:grid;
  • grid-template-rows: 1;
    and/or
  • grid-template-columns: 1;
    with and without
    +grid-column: 1/2;
    and/or
    +grid-row: 1/2; (all of these had no effect)
  • @media print
  • @media print only
  • @media print only screen
  • @media print screen
  • @media print not (for navbar and nav-link only)
  • All of these did not effect the main-doc and I was only able to print part of the first page in all attempts.

If you have any ideas that may help me that would be great. I have left a link to the site below.

Thank you,

Web Link:

https://codepen.io/freeCodeCamp/pen/NdrKKL

2

I am not sure I understand your problem here.
What I understand is you want to remove your navbar

display:none;

This will hide your navbar, make sure you run your code and give codepen some time to do it.
When you hide it check your main css

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

It’s position is absolute and margin-left is 310px; so there is going to be space on left side(310px).
Hope this helps.

3