However, my site is still resizing up and down if you reduce or expand the browser width, but that's not a problem as it looks OK

This is expected—it's how the theme was designed to work.

my problem is when you view it at a narrow screen width, e.g. ipad size, at which point the second column moves to flow beneath the first column and converts to a black background - presumably to make the distinction of the second column

Take a look at the @media rule for the 900 px max width here:
https://s1.wp.com/wp-content/themes/pub/reddle/style.css?m=1356723415g&minify=false

You'll notice there are a few rules that set the background color to black. To override those, copy the @media block, remove everything but the rules for the colors, and replace the color values. Here is an example to get you started:

@media (max-width: 900px) {
	#page #main .widget-area {
		background: #fff;
		color: #000;
	}
	#wp-calendar caption {
		color: #bbb;
	}
	#wp-calendar tbody td {
		background: #fff;
		border-color: #fff;
		color: #bbb;
	}
	#colophon,
	#supplementary {
		background: #fff;
		border-color: #fff;
		color: #000;
	}
	#page #supplementary .widget-area {
		background: #fff;
		color: #000;
	}
}