XF 1.x xenbase Header styling

OUTL4W

Customer
I'm trying to use an image that is the width of xb_page_width but the overflow falls below the navbar which I'm trying to atleast hide on mobile.
in xb_header & navigation>LogoBlock PageContent> backgound field: image url then in the css box I have
Code:
min-height:250px;
min-width: @xb_page_width;
border-radius: 10px !important;
overflow: hidden;
@xb_page_width = 90% with boxed layout ticked.
in extra css I'm using:
Code:
<xen:if is="@enableResponsive">
     @media (max-width:@maxResponsiveNarrowWidth)
{
#header .pageContent .pageWidth {padding-bottom: .17%; overflow: hidden;}
}
</xen:if>
which results on mobile as:
upload_2016-8-28_21-25-50.jpeg

trying to eliminate the redbox area...been trying everything I can think of: fixed height, %height and if all else fails {display:none;} would be acceptable. The overflow doesn't show when in landscape just portrait mode. The "padding-bottom" trick is used by determining (Image Height / Image Width) * 100% to auto size images in responsive mode. So now I'm deferring to the experts.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.