Show/Hide div in mobile view in landscape mode

Question

I'm having a different design on my website for mobile, tablet and desktop. I'm using mediaquery to hide/show the div. Everything working fine in portrait mode. How can I handle this in landscape mode? Mobile phones are taking up the tablet design due to increased width pixels in landscape mode.

Answer 1

As per the answer at: https://stackoverflow.com/a/5735636/5580153

CSS to detect screen orientation:

@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }

The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation

Further discussion of the limitations of this solution can be found here, primarily that the soft keyboard can break the layout:

CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution?

You should consider factoring in a combination of min-max pixel restrictions combined with orientation, as more recent comments point out. The w3 article is still a good source of information however.

Answer 2

Try this, hope it will help you

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}