Media Query Problem

Question

I have tried a lot but "(orientation: landscape)" in media query is not working. The CSS for landscape remains the same as that set for the mobile portrait mode.

Please help.

Answer 1

Janning⭐ Thank You :)

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}

http://viewportsizes.com/?filter=nexus

https://www.yudiz.com/orientation-problem-media-query-media-is-a-better-way/

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

check all of these solutions.

Answer 3

Mayur Shedage Thanks but I have tried all of these and many more and it is not working. For portrait mode, the media query for portrait is being displayed but for the landscape mode too, the media query for portrait mode is only functioning and not the media query for landscape mode. I can't understand why.

Answer 4

Janning⭐ No, it isn't. I have tried multiple no. of times. It's just that orientation: landscape concept not working. And I can't understand why.

I have fixed that problem by using max/min-height and width but still. It's really strange.

Answer 5

Janning⭐ The code is too big to be shared. It would have been too messy to understand.
I've been creating a blog website. Nonetheless, the problem is fixed so what "orientation" didn't work :)

Answer 6

Carry on: Keep up the good work! :D

Answer 7

syntax error?

Answer 8

lol. Not implying you haven't tried enough times. :) It's just -- who besides you can really tell what might be happening when there's no code to look at? I was going to take a different stab in the dark and say something got stuck on either a vw or a vh, but I'm glad you were able to solve your own problem before that. :)