Hope you can help.

I'm working on this site: http://217.199.187.62/onelifeyourlifeloveit.com/

Using Atahualpa 3.7.12 and WP 3.7.1

I've added a new widget area to the footer, using this code:

<?php bfa_widget_area('name=Footer widget area&cells=2&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>

I've added a text file featuring an image to each widget and on my screen the two graphics look fine, they are evenly spaced with a gap between them, but on smaller screens (eg my iphone) one overlaps the other and the right hand one disappears off the side of the site.

How can I make them scaleable so they'll look right regardless of screen size?

#text-7 img {
    width: 100%;
}
#text-8 img {
    width: 100%;
}

try

Ah thanks. it's showing the full image now. How can I add padding between them?

I'd add a 'white' right border to to the first table cell and a left border to the second table cell and make the width of the borders 1/2 of what you want the full border to be.