How to achieve the desired result - css and bootstrap?

Question

css

Hello. Please help me with bootstrap.
There is index.html and it contains a picture (logo), a title and a couple of inputs. When viewed through the mobile version, the dimensions of the picture (logo), title and inputs remain the same as for a regular monitor (large).
There is style.css. If I explicitly set .container { width:600px; } (without media and other stray), now when viewed through the mobile version, both the picture (logo) and the title and inputs decrease proportionally - exactly what I need!
But the problem is that if you open the page through a mobile device, then the page does not open on the screen, but as if it were zoomed in, and in order for it to fit on the screen, you need to move the zoomed version away with your fingers. Can you please tell me how to make the screen open initially normal (completely contained), and not as if someone brought it closer? Thank you.

Answer 1

Set the viewport in the head section of index.html:

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

html,body{overflow:hidden} but what you call media expressions "crap" leaves a lot to be desired and my advice to you is don't go to the web

Answer 3

Looking at your code, it can be concluded that you do not quite understand how the Bootstrap grid works. Do you need responsive or proportional page reduction? If proportional reduction of the page, then you need to hard-fix the width of the Bootstrap container (via important) and assign all columns only col-xs-... (what you have there). But there is a nuance in this that it will be all so small and not usable on mobile devices, because. it's not adaptive. Yes, and then it makes sense to use a boot? With the same success, you can make the layout fixed and not worry.
If you want exactly adaptive or responsive, then you need to delve into the principle of the Bootstrap grid and additionally control all media queries.