Print CSS Not Working Correctly

HTML & CSS
1

Hello everyone and thanks for the help in advance. 'm trying to develop a very simple webpage that can also be used to print handouts. A sample page is located at https://kidsmedicalcare.com:43443/home/hours. The page displays correctly (at least how I would expect) however, when the page is printed or saved as a pdf, the header text shrinks dramatically to the point of being almost unreadable on a printed document. I have no idea why this is happening or how to fix it. Any help would be appreciated.

2

It’s a while since I did any print CSS, but maybe it would be better to use absolute units for font-size in the print, rather than the relative em and rem units.

3

Have you fiddled with the various font-size values in your css file in the

@media print {

section? When I do, it changes as expected for printing. Change this one, for example, and the doc’s name is bigger

    header h1 {
        font-family: 'Comic Sans MS';
        color: teal;
        font-size: 4em;    <-------- changed this -->
        margin: 0 1em 1em 0;
        margin-right: auto;
    }
4

The address is very small because it takes this rule from the default styles and you don’t over-ride it in your print css.

.suite {
    font-size: .6rem;
}

Add and change that size in your print css rule. Note that any styles that don’t have a specific media rule will also be included in the print css. Also note that generally you would just over-ride some properties in the css and not write a whole new stylesheet for it unless it was totally different.

(Your header in print is more or less the same as the small screen display so you only have to close your browser a little to see what happens as only the header is changing.)

5

Yes, this does change it. Any idea why I would have to do this for print?

6

Well, it’s kind of a big topic - here’s a link that might be helpful. https://www.sitepoint.com/css-printer-friendly-pages/

Basically, paper sizing isn’t the same as screen sizing, hence the incorporation of a @media print block in a stylesheet for any site that might be printed. The intention is that the differences between screen and print (there are other media types but I’ll ignore them for now) are listed in the print section, and they modify the styles above. I notice you have a lot of duplication, for example you list header {display:flex} in your print styles where it was already that way in your screen style. You don’t need this duplication.

But often font sizes and almost always colors need to be changed because print is often black and white. So those things are pretty common to see in print stylesheets. So just set them as you did in that print section of the css, to whatever size you want for printing.

I notice on your main table of “office hours” you’ve put the style right in the html table, which is not the best way to do it, and is currently applied regardless of screen or print, since you don’t override that in your css. You might move that stuff into the css, for consistency.

Also you should add a doctype, like:

<!DOCTYPE html>
<html lang='en'>
<head>

at the top of your code (replacing your .. lines) so that the code is interpreted right in browsers.

7

Thank you so much for all the help and insight.