Hello! The first time he encountered this. Essence of the question. Media requests of the form are set:

@media only screen and (max-width : 600px) @media only screen and (max-width : 480px)

those. if <480 or <600 then css should follow these rules. BUT, something strange is happening in the mobile. There is a chat. And input = "text" where you can enter a message. when you select input via a mobile phone (to enter a message), a keyboard appears on the mobile phone screen, respectively, the browser height decreases ..

And when the height of the browser is less than the width, the current media request is lost. I tried to add to the request:

 @media only screen and (max-width: 480px) and (min-height: 0px)

Did not help.

Update

Already more interesting. Created snippet. https://codepen.io/volks/full/dXPLEK/ Made a few media. I came from a mobile phone and nothing. It's okay Everything is correct and the height of the window does not change.

 .wrap{ max-width: 600px; margin: 0 auto; border: 2px solid #222 } .chat_area{ background-color: #eee ; width: 100%; height: 200px; text-align: center; } .chat_area p{ margin: 0; padding-top: 100px; } .chat_input input{ display: inline-block; padding: 5px; width: calc(100% - 120px); } .chat_input span{ background-color: red; display: inline-block; color: #fff; padding: 5px 0; width: 100px; text-align: center; } .other_cont{ margin-top: 20px; } @media only screen and (max-width: 600px) { .chat_area { background-color: blue; } } @media only screen and (max-device-width: 800px) and (orientation: landscape){ .chat_area { background-color: black; } } @media only screen and (max-width: 480px) { .chat_area { background-color: red; } } @media only screen and (max-width: 400px) { .chat_area { background-color: yellow; } } 
 <div class="wrap"> <div class="chat_area"> <p>here some chat</p> </div> <div class="chat_input"> <input type="text" /> <span>Send</span> </div> <div class="other_cont"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda possimus sequi amet iusto voluptates eligendi magni veritatis harum cumque, quam perferendis sapiente eum ipsa fuga alias magnam unde cum.</p> </div> </div>

  • Why code in the comments? And in general, add a reproducible example to the snippet in the question. - Qwertiy ♦
  • The first time I asked a question here, because I tried to select the code. Excuse me. In fact, the site is over no comments. Snipe can not add, a lot of HTML and css - Stanislav
  • Well, the minimum reproducible example ... - Qwertiy ♦
  • @NicolasChabanovsky, this is css, not js. And stop torturing the auto-format button. - Qwertiy ♦
  • @NicolasChabanovsky, and in general, what is the point of adding this code to the question, if the problem is not reproduced in it? - Qwertiy ♦

1 answer 1

The problem was solved. Thank you Qwertiy!
Still, the example works, I didn’t see it. For the test, you need (using Google Chrome as an example) to switch to developer mode, select the mobile view mode and reduce the height. And you will see that the color of the chat window will change.
So what was the problem.
When height is greater than width , the media-landscape .. mode is turned on and at that moment, when you press VIA the mobile, the keyboard pops up at the bottom of the mobile phone screen, which made the screen height smaller than the width. And since I set the maximum breakpoint for the media landscape mode (in the example max-width: 600px), the landscape styles were connected, and the styles below were interrupted by code. By limiting the minimum width. The problem has been resolved.
Thanks again Qwertiy!