Responsive design with a fixed position header - on mobile device in landscape mode

HTML & CSS
1

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).

2

Welcome, @jessycabroekman. We can’t really help you much without either a link, or the relevant code. Right now, all we would be doing is guessing what the problem is and how to fix it.

1 Like
3

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.

@media only screen and (max-width: 900px) and (orientation: landscape) {
.header {
height: 50px;
position: relative;
width: 100%;
margin: auto;
}
1 Like
4

I would just set a media query based on height as well because you don’t really need to concern yourself with device or orientation.

Just look at your design and close the window upwards and when you think the fixed header is encroaching too much then throw in a media query and unfix it :slight_smile:

Most of the time you can forget about devices and just concentrate on what the design needs.

3 Likes
5

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/].

Thanks again, so much for your help.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.