The main problems with getting the header image to show up on a mobile size is 1) there’s a lot of white space on the left of the image itself, and 2) the width of the header is being set to 10% in a media query, which really makes the header size too narrow. You can see that by looking at the size of the drop-down mobile menu. Instead of saying “Navigate to…”, it just has the drop-down arrow on a phone width, maybe an “Na” on a tablet width.
I would keep the header width around 90% on the media query, and then I would edit the image to remove all of the white space. You can then position the image to the right by adding a background-position: right; to the default CSS rule for .header, and in your media query, change the background-position to center.
Adding a “view full site” may be problematic. I think you will have to find some way of disabling all of the media queries via JavaScript.
