I was able to fix it by adding the following:
@media only screen and (max-width: 479px) {
// fix logo warping on iphone
#logo img, #logo img.retina {
max-width: 200px;
height: auto !important;
min-height: inherit !important; // <---this was the issue. by default it is min-height:none!important;
}
// remove excess space in header when logo is smaller
.header-container > .row, .header-5 header .container > .row, .header-6 header > .container > .row {
height: auto !important;
}
}