K Pixel on "Fixed footer looks bad on mobile devices - how can i make it responcive? thanks!"

We are a small art gallery building a wordpress website - you can see the work in progress here:http://kiraaskaroff.com/BB_Test2/

The footer looks great on a computer but with its fixed layout it looks rubbish on a mobile device (part disappears etc)

* footer */

#footer-content { margin-top: 60px; max-width:978px; min-width:320px;  height:230px;     overflow:hidden; padding-top:0px;  padding-left:200px; font-family:Georgia; color:#3F3F3F;  font-size:12px; text-align:left; }

#footer-left { float:left; width:199px;  height:182px; overflow:hidden;  }
#footer-mid1 { float:left; width:230px; height:182px; overflow:hidden; }
#footer-mid2 { float:left; width:138px;  height:182px; overflow:hidden; }
#footer-right { float:left; width:180px;  height:182px; overflow:hidden; }

.footer-header { font-family:Georgia, font-size:14px ; font-weight: bold; display:block;     color:#3F3F3F; padding-bottom:16px;text-align:left; }

.footer-social-a { display:inline; padding-right:5px; padding-top:18px;text-align:left; }

.styles #page .site-info a {
font-size: 12px;}

I had some advice on here previously about using max width and min width - this seems to have made some improvement but im not sure how to add it to footer left etc without messing up the whole look.

Any help making it look better on a mobile would be amazing!