Here is an example of two media queries that target small and medium screen sizes and do different things with the search depending on the screen width:

@media screen and (min-width: 600px) and (max-width: 740px) {
	#page {
		position: relative;
	}
	.widget_search {
		position: absolute;
		top: 110px;;
		right: 20px;
	}
	.widget-area .widget_search h3 {
		margin-bottom: 0;
	}
	.site-header h2 {
		text-align: center;
	}
}
@media screen and (max-width: 600px) {
	#page {
		position: relative;
	}
	.widget_search {
		position: absolute;
		top: 175px;
		left: 5%;
		width: 90%;
		text-align: center;
	}
	.widget_search h3,
	.widget_search div,
	.widget_search form {
		display: inline;
		clear: none;
	}
	.widget-area #s {
		width: 25%;
	}
}

I would suggest the search box at the top of the sidebar, but then the sidebar falls to the bottom on narrower screens.

There are some themes that have a search box built into the header area. You might take a look at those themes and see if any of them are responsive designs. I know 2011 is.

However, the mobile version is messed up now. If you view it, the search widget appears in the middle of every screen. Is there perhaps some code to disable this modified widget for the mobile version since the mobile version already has its own search function?

It's just what I wanted now!

#content article {
	margin-bottom: 0;
	padding-bottom: 0;
}

Also note that logged out users (i.e. normal readers) won't see that "(Edit)" link, so that will reduce some of the space as well. To test that, try doing a print preview after logging out or from a different browser where you have not logged in to WordPress.com.

One last question if I may! Why is there such a large gap between the last line and the footer? Is that configurable? I tried putting a height on the @media print { #content but it made no difference. I was hoping that the Home page would be on 1 sheet of paper rather 1 and a tiny bit!

Here is what I see in a print preview on my laptop: http://cl.ly/Om8c

Note the circled option on the left, it's an option on the user's side whether or not to print background images.

#page {
	position: relative;
}
.widget_search {
	position: absolute;
	top: 135px;
	right: 20px;
}

Adjust the number values as needed.

All that remains is - Is it also possible to print a different image for the header, rather than the screen header?

In your theme, which is Fresh & Clean as you've mentioned, you can target and hide the sidebar, header area, main menu, and post flair (sharing links and likes) all in one swoop.

Find this part of the previous example:

#sidebar {
	display: none;
}

And change it to this:

#sidebar,
#branding,
#access,
#jp-post-flair {
	display: none;
}

Note that WordPress.com requires keeping the footer credits in tact, but they don't take up a ton of space so hopefully you'll think they're okay in the example above!

Can I now exclude the Menu and the Footer in the same fashion? I have tried playing with various options but can't seem to find the correct "words"! I am wondering if the difference is WordPress?

@media print {
	#content {
		width: 96%;
	}
	#sidebar {
		display: none;
	}
}

Here is some additional info about print stylesheets:
http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

You can get a good idea about previewing if you write the CSS without the "@media print { }" wrapper first (just to preview), and then add it back before saving and use your browser's print preview option to see what the final outcome will look like if printed.

For example

#logos, #skip, #menu, #footer, #blind_user, #no_print
{
	   display : none;
 }

How can I control what appears on the printed page?

• no sidebar, widget area
• different image header

Is it also possible to print a different image for the header, rather than the screen header?

http://www.binvisions.com/tutorials/css3-media-query-tutorial-introduction/

http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/

So, if you wanted to target a smaller screen size, you may need to add a new @media rule with the background image rule you want inside it. Here's a basic example:

@media (max-width: 650px) {
    p {
        color: red;
    }
    [ put your CSS rules here ]
}

I have been trying to get http://ilivebytheriverblog.wordpress.com to look the way I want but one thing is bugging me: when I resize the browser window or zoom in and out, the background image changes with respect to the main body of the blog. It also looks different in other browsers (I use Firefox) and doesn't look right on tablets etc.

At the moment I haven't paid to have access to the CSS sheets, although I have a very basic idea of CSS and have used it to do a few other minor things to the site etc.

Is there something I can do?

I've contacted support, who were very nice and helpful, but it turns out that the CSS Processor they use for their customer design doesn't currently support using CSS3 media queries as detailed in my above post.

Hope this knowledge is useful for someone battling the same issue.

I've also made my blog visible, as while there's no design there as such yet, it makes it easier for you guys. Thanks for your help so far!