[Theme: Suit] Logo not displaying on mobile site

Hey all,

We are having trouble getting the mobile site to display our header logo.
Mobile theme is enabled.
Also include this CSS in the mobile theme is enabled. Within the custom css I have added.

@media (max-width: 643px)
{
.site-header
{
background-color: black;
max-width: 540px;
height: auto;
}
}

Which should in theory force the header background to be black and scale the image down. Since I uploaded the header through word press which has default width at 960px.

However none of this is applying. In the customize preview I can see all the changes that are suppose to take place. But when its published the actual site doesn’t show any changes.

The site in question is here

Should note that the header image is a PNG. The image has transparency. Testing the mobile site via an iphone with safari and chrome app.

In short is there a way for me to upload a separate header for the mobile site. Because the current header is not displaying properly.