Не могу понять, в чем причина. Не первый сайт верстаю, да и не сайт, так, заказчику хотел показать пример калькулятора на его сайт. При сужении окна браузера контент не адаптируется, а масштабируется, как если бы viewport не было. Делал с шаблона, с которым ни разу таких проблем не было. Подскажите, пожалуйста, где я туплю?
Адрес: https://sah.vybordela.kz/kalkulyator-potolkov/
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta id="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Калькулятор потолков</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="calculator" id="calculator">
<div class="calculator-grid">
<div class="calculator-item">
<label class="calculator-item--label" for="material">Материал</label>
<select class="calculator-item--field" id="material" type="text" onchange="calculate()">
<option value="ПВХ">ПВХ</option>
<option value="Ткань">Ткань</option>
</select>
</div>
<div class="calculator-item">
<label class="calculator-item--label" for="room_length">Длина потолка</label>
<input class="calculator-item--field" id="room_length" type="number" onchange="calculate()" value=0>
</div>
<div class="calculator-item">
<label class="calculator-item--label" for="room_width">Ширина потолка</label>
<input class="calculator-item--field" id="room_width" type="number" onchange="calculate()" value=0>
</div>
<div class="calculator-item">
<label class="calculator-item--label" for="number_of_corners">Количество углов</label>
<input class="calculator-item--field" id="number_of_corners" type="number" onchange="calculate()" value=4>
</div>
<div class="calculator-item">
<label class="calculator-item--label" for="number_of_lights">Количество светильников</label>
<input class="calculator-item--field" id="number_of_lights" type="number" onchange="calculate()" value=1>
</div>
<div class="calculator-item">
<label class="calculator-item--label" for="number_of_pipes">Количество труб</label>
<input class="calculator-item--field" id="number_of_pipes" type="number" onchange="calculate()" value=1>
</div>
</div>
<div class="calculator-footer">
<div class="calculator-footer--item calculator-footer--sum">
<div>Итог: </div>
<div id="calculator_sum">0</div>
</div>
<button class="button" id="calculator_button" style="display:none;">Рассчитать</button>
<div class="calculator-footer--item calculator-footer--gift">
<div>Подарок: </div>
<div id="calculator_gift"> </div>
</div>
<div class="calculator-footer--item calculator-footer--discount" style="display:none;">
<div>Скидка: </div>
<div id="calculator_discount"> </div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
border: 0;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus, :active {
outline: none;
}
a:focus, a:active {
outline: none;
}
nav, footer, header, aside {
display: block;
}
html, body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input, button, textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a, a:visited {
text-decoration: none;
}
img {
vertical-align: top;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: 400;
}
html {
font-family: Roboto;
font-size: 14px;
}
.calculator {
margin: 0 auto;
background-color: #f2f2f2;
padding: 10px;
max-width: 420px;
width: 100%;
}
.calculator-grid {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
align-items: end;
padding: 0 10px;
}
.calculator-item {
display: flex;
flex-direction: column;
font-size: 16px;
}
.calculator-item--label {
margin-bottom: 10px;
font-size: 16px;
font-weight: 600;
}
.calculator-item--field {
/* height: 1.5em; */
max-width: 200px;
padding: 8px 5px 8px 5px;
background: #fff;
border: 1px solid #aaa;
border-radius: 3px;
}
.calculator-item--field[type=number] {
text-align: end;
}
.calculator-footer {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr;
/* grid-template-rows: repeat(2, 1fr); */
grid-auto-flow: row;
font-size: 16px;
font-weight: 600;
margin-top: 20px;
align-items: center;
padding: 0 20px 20px 20px;
}
.calculator-footer--sum,
.calculator-footer--gift,
.calculator-footer--discount {
/* display: flex;
flex-direction: column; */
}
.calculator-footer--sum > *:nth-child(2) {
font-size: 1.2em;
}
.calculator-footer--item > div:nth-child(2) {
color: green;
text-align: end;
}
.button {
background-color: rgb(137, 231, 255);
font-weight: 700;
justify-self: center;
padding: 10px 20px;
}
.calculator-gift {
}
.calculator-discount {
}
@media all and (max-width:400px) {
.calculator {
width: 100%;
}
.calculator-grid {
grid-template-columns: 1fr;
}
}