Why is the site not adapting to bootstap 3?

Question

css

Hello. There is a site that has long been made up for us on bootstrap. Please tell me why in the 320px resolution it does not adapt and does not increase somehow on the screen.
Put down

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

But it seems that the bootstrap file was changed there, we connected another one from the off site.
Look and tell me please))

Answer 1

why, if bootstrap, then the site must adapt? Ridiculous assertion. The site has a minimum fixed width. You can see it if you zoom out the site in the browser. You will have a scroll bar at the bottom

Answer 2

I would also advise you to flip the hamburger. It is pressed only if you press exactly on the span but it seems to me that this is not correct.
And here, in general, something fierce prntscr.com/i7j6ly

Answer 3

On the site, some elements have a fixed width and a minimum width - "non-responsive in responsive". Here is an example:

Answer 4

Good afternoon.
when viewed in firefox (in mobile mode - press CTRL + SHIFT + M for this)
you can see how the site is displayed on smartphones with a resolution of 320px
to find out the reason why this or that block "does not add up" in mobile, right click on the block and select "inspect element".
In the developer toolkit that appears, you will see how the layout element behaves at a given resolution. And you will also see in which css file and on which line you need to make changes.
In the same editor, you can play around and change the parameters without changing the CSS files (a kind of sandbox) to understand what the changes will lead to. for example the BODY
elementhas styles at a resolution of 320 (as FireFox shows, these styles are in the file roadto.alfaecology.ru/assets/theme/css/app.css on line 38)

body {
    color: #000;
    font-family: 'GillSans';
    max-width: 1280px;
    margin: 0 auto;
    font-size: 16px;
   min-width: 940px;
}

which means that even at a resolution of 320 pixels, the BODY browser will have a min-width (minimum width of 940px)
try playing with the width of this tag in the FireFox CSS code editor at the desired resolutions and you will see the result.
And so on, follow each block (and its parents it's wrapped in) that goes beyond the required width.
to set special conditions in CSS for non-standard permissions, wrap the special conditions for the same BODY tag in a CSS block at the end of the CSS file

@media screen and (max-width: 320px) { 
        body {
    min-weight:320px;
  }
}

Important . The 940px condition for large resolutions does not need to be removed! The browser will understand and give priority to the resolution that is described in the @media screen parameter