Trouble with print stylesheet

Question

First off, I admit that my knowledge of HTML and CSS is very limited. I'm surprised I was able to create a website in the first place.

In working on my SEO, I come to realize that I need a printer friendly version of my website. I have been able to hide the elements I don't want printed (pictures, facebook/pinterest/blog buttons, etc.), but I can't get passed two things.

1. I want my logo/header to be much smaller on the printable sheet.

2. I can't get rid of the space on the left hand side that my navigation (sidebar) occupies. Apparently it's not enough to simply hide it?

My website is www.minnesotamarryingman.com and if you print it out, you can see the larger-than-need-be header and the large left sided column.

Here is what I have for my print.css...

#header {width:128; height:29;}

#body {margin:0; padding:0; float: none; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 16px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

div#sidebar{display: none}

div#pinterest{display: none}

div#pinterest1{display: none}

div#facebook{display: none}

div#blog{display: none}

div#picture1{display: none}

div#picture2{display: none}

div#list{display: none}

Can someone please help me see where I'm going wrong?

Answer 1

It actually looks pretty decent on my MacBook Pro in Chrome and on Safari, so I'm guessing you figured out the Navbar issue on the left. To make the logo smaller I'd just include an id tag in the logo image and then set that in your print.css instead of just setting a new height and width for the header. Also, it's important to say the units in the size, so use 'px' after the number as shown below!

In your file:

<img src="....." id="logo">

And in your print-css:

#logo { width:128px; height:29px; }