Why does the layout slide when the screen is rotated?

Question

css

I check through the browser all the permissions - all the rules. I’m watching from an iPhone and everything is fine at 320, I turn the phone and for some reason it doesn’t get up as it should, like in a browser. Some blocks do not get the desired styles. I can't figure out why.

Answer 1

Write styles for horizontal screen orientation

@media only screen and (device-width: 320px) and (orientation:landscape) {
   
}

Well, orientation:portrait - vertical

Answer 2

Screen resolution and workspace are not always the same, most likely the width of the iPhone's workspace, when rotated, does not match the given width in your style.
Try to find out the width of the working area or pick it up using the scientific poke method.