How can I make my header image properly responsive?

I am trying to put a site together for a friend using a really nice premium Wordpress theme. I have paid for the theme but the designer will not help with customisation. The site is currently at www.zerocarbonfood.co.uk/test/. Originally the theme had a small left-aligned logo but my friend favours this large full-width one, which I think works better. Problem is now that I look at it on an iPad or iPhone (portrait) the logo is too big and screws it up. In the theme options it is defined as 922px width and 168px height. I cannot put a percentage value in there. Can I override this in CSS somewhere? Any help would be gratefully received as I am a bit out of my depth.