Do not print all of modal container

[javascript7]

.modal-container {
  margin: 60px auto;
  width: 50%;
  min-width: 750px;
  max-width: 850px;
  max-height: 600px;
  overflow: auto;
  border: 1px solid;
  background: #fff;
  border-radius: 5px;

Trying to figure out how NOT to print the border: 1px in the modal container.

Any easy solutions that can be altered in the CSS?

Thank You.

[SamA74]

Something like:-

/* Print Styles */
@media print {
    .modal-container {
        border: none ;
    }
}

[javascript7]

Thank you - that worked, I appreciated it.

My modal doesn’t fit within the printing area because of a graphic extending beyond the margin. Is there a way to print at 80% using CSS rather than using printing preferences?

[SamA74]

@javascript7

Is there a way to print at 80% using CSS rather than using printing preferences?

You can put whatever alternative css rules you want in the @media print media query. You can have a whole different print stylesheet if you want to.
For example, I hide things like the navigation in print using display: none, because it’s of no use in that medium, just a waste of space and ink.

[javascript7]

/* Print Styles */
@media print {
    .modal-container {
        border: none ;
        size: landscape;
    }
}

I was trying to print in landscape but adding the size: landscape doesn’t work. Where am I going wrong?

Also, would this code have to do with scroll bar and can that be added to the no print?

}
.modal-content {
  padding: 0 10px;
}
.modal-content p {
  margin: 0 0 1em;
}

[javascript7]

/* Print Styles */
@media print {
    .modal-container {
        border: none ;
    }
    
    img {
	width:95%;
	height:95%;
	display:block;
	}
}

Actually, this seems to work pretty good. Thank you for your help.