How to get a header right for mobile devices

[hantaah]

I’ve given the header on this url http://www.halalhomecooking.com/ css such as this:

.header-image .site-title a { float: none; min-height: auto; max-width: 100%; height: 185px; }

but the header is being cut off when being viewed in mobile devices such as this:

So how do I make this header view correctly in mobile devices?

[OzRamos]

Try starting with this:

@media (max-width: 1000px){
    .foodie-pro header.site-header{
        background-size: 100% !important;
    }
}

That will make the background image 100% width only on mobile (1000px or less)

[hantaah]

Interesting

Works a treat!!!