Can’t get media query max-height to work

  • For some reason, the following code isn’t working. It would only work if I used max-width instead of max-height.

    @media only screen and (max-height: 500px) {

	.nav-secondary {
		display: none;
	}

}

    Am I missing something obvious?

    Thank you!

    • This topic was modified 7 years, 6 months ago by Rosa Parker.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Make sure you have a viewport tag, like <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>.

    Hi Rosa Bosma
    Try like this may be it will help
    @media (max-height: 800px) {
    property { }
    }

    While min-height and max-height will never be used to the same extent as min-width and max-width they provide a number of design opportunities which we’re only just beginning to exploit.

    Rupok

    (@re_enter_rupok)

    Hey there,

    It should do the job :

    @media screen and ( max-height: 500px ){
	.nav-secondary {
		display: none;
	}
}

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Can’t get media query max-height to work’ is closed to new replies.