Logo height adjust breaks theme in IOS responsive sizes

A few weeks back I was given some code to lock the logo and menu into a fixed position. Therefore it would stay on screen all the time (even when im scrolling). Its been working fine but since upgrade to 1.5 when I shrink the screen to IOS sizes or try it on an iPhone the main screen is literally cut in half (one side is blank)

You can see the effect if you try out my website…. andypeck.co.uk

See below the lines of offending code where the main issue seems to be the lines related to the logo position . However, if I remove it then the logo is positioned too high. The only other way is tweaking the ‘locking’ part of the CSS which relates to scale but when I do this the logo resizes too small.

Here’s the code:

/* LOCKS MENU INTO FIXED MODE – SCALES LOGO */

strong.logo img, #header_main .container, .main_menu ul:first-child > li > a {

height: 50px !important;

line-height: 50px !important;

padding-top:0px !important;

}

/* ADJUSTS LOGO WITHIN HEADER */

.logo {

margin-top: 20px !important;

margin-bottom: 30px !important;

}

/* ADJUSTS HEADER HEIGHT */

#header_main {

height: 90px;

}

cheers

Andrew