Can you please post a link to your site? Thanks.
I actually figured the ‘responsive’ part out… but I am still trying to get the header image to show up on the mobile screen and I would like to add a ‘view full site’ to the bottom.
http://theinbetweenismine.com
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.
Thanks so much! I will give this a try!