CSS fails when changing device orientation

[ralphm]

Some devices play with font size a little, which you can override with something like this:

html {
    -webkit-text-size-adjust: 100%; 
}

[LamboLight]

It didn’t help. The “li img” has the same height in both cases referring to the inspector but the whole navigation bar becomes larger when switching through the subpages.

[PaulOB]

@LamboLight

but the whole navigation bar becomes larger when switching through the subpages.

That was something you asked for in previous posts and the navigation height changes to smaller if the screen is less than 768px tall as you didn’t want the header to look too big on smaller screens. When you click to landscape you have less height to play with so the smaller style header appears.

Just shorten your desktop browser height to see the same effect.

[LamboLight]

I think you didn’t get me right.

index.html in iPad landscape is totally fine with the reduced height and everything. When I go to contact.html (or any other subpage) the header resizes to the height of the portrait mode header. As if the changes we did with the css of the index didn’t work with the contact.css. I copied the changed CSS of the index referring to the navigation to all of the other subpages, but for some reasons this does not seem to work.

[PaulOB]

Make sure you have this viewport meta tag in all pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You are missing the initial scale = 1 in some pages which will allow the browser to zoom as it feels fit.

[LamboLight]

That was the solution. initial-scale=1.0 wasn’t there.

Thanks again.