Truly Responsive Mobile Logo?

Guys,. we were having an issue with our logo being too small. Fixed it on most devices/views with this code added to Quick CSS:
__________________________________________________________________________
@media only screen and (max-width: 767px) {
.responsive .logo img {
height: 160px !important;
max-height: 160px;
width: 330px;
max-width: 330px;
}}

@media only screen and (max-width: 767px) {
.responsive #top #main .sidebar.smartphones_sidebar_active {
border-top-width: 0px !important;
}
}
___________________________________________________________________________

Only issue now is although it looks great in portrait mode,.. when the device is turned to landscape mode,.. the logo does not scale up and we are left with a logo that is too small and justified to the left. Tried tweaking this code but nothing seems to work.

Thoughts?

SEE HERE

Thanks in advance. Remember to inspect in Iphone 6 view.