Hi, I am working on a new website and trying to consider mobile first to some degree. So I have a fixed position header with the navigation for all screens until they get to be about 480px wide (iphone 6 and below) - at which point I change the header to no longer be fixed. My concern is, when someone using a smart phone turns their phone to a landscape position, the width becomes larger than 480 and my header goes back to being "fixed" position - and then you can't really see enough of the content below the header. Is there some way to solve this? I am using media queries in my CSS stylesheet to affect the changes necessary for different devices. Any help would be most appreciated! (I do not have a live version yet, but will soon).

Since you dont have a live version, something like below should work. Just change the variables to suit your code. This says any mobile phone with a max screen resolution width (landscape) of 900 and all resolutions below, the header will be fluid, or not fixed. You may have to change position to absolute depending on your layout. If you want include certain tablets, you would have to go up to a higher resolution. Of course, as you approach 1366px, there will be an overlap with some desktop resolutions like 1366x768. See this site for many mobile device resolutions. You need to look at the devices "CSS Height" column to make sure any devices you want to targets landscape resolution is included in your final px width choice.

Thank you - all three of you both for your willingness and your help. I'd forgotten what a great place this is. @PaulOB I really appreciate your suggestion to forget about devices, and make my break points based on design, and to use the media query based on height, which I'd never known was a possibility. It works like a charm.

The site is still in development but in case you are curious, I've uploaded a working version here: [http://jmbroekman.com/ravenhowell/].