Ошибка реагирования CSS ⇐ CSS

[Anonymous]

Я хочу сделать ее адаптивной, но это не работает
Это страница входа, написанная на php

.
Я хочу иметь адаптивный дизайн, показывая только форму, то есть два поля ввода, кнопку входа в систему и текст под ними. Не скатывается в сторону или что-то в этом роде. Только форма с белым фоном и фон позади него немного виден.
Мой CSS-код следующий:

Код: Выделить всё

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
/* make the body full height*/
height: 80vh;
/* set our custom font */
font-family: 'Roboto',
sans-serif;
/* create a linear gradient*/
/* background-image: linear-gradient(to right, var(--body_gradient_left), var(--body_gradient_right));
background-image:background: linear-gradient(to bottom, #009999 0%, #ccffff 100%); */
background:  url("../images/index4.png") no-repeat fixed center;
/*background-image : url("images/delta2.jpg");
background-repeat: no-repeat;
background-position: center;  */

background-size : cover;
/*opacity : 0.7; */
display: flex;
}

Это для всего тела, код формы следующий:

Код: Выделить всё

#form_wrapper {
width: 600px;
height: 400px;
/* this will help us center it
margin: auto;*/

margin-left :auto;
margin-right :auto;
margin-top: 300px;
background-color: var(--form_bg);
border-radius: 50px;
/* make it a grid container*/
display: grid;
/* with two columns of same width*/
grid-template-columns: 1fr 1fr;
/* with a small gap in between them*/
grid-gap: 1vw;
/* add some padding around */
padding: 2vh 15px;
opacity : 0.95;

}

#form_left {
/* center the image */
display: flex;
justify-content: center;
align-items: center;
}

#form_left img {
position:absolute;
width: 400px;
height: 180px;
z-index:1;
border-radius: 25px;

}

#form_right {
display: grid;
/* single column layout */
grid-template-columns: 1fr;
/* have some gap in between elements*/
grid-gap: 5px;
padding: 10% 5%;
z-index:2;
}

Наконец, средство реагирования:

Код: Выделить всё

@media screen and (max-width:768px) {

/* make the layout  a single column and add some margin to the wrapper */
#form_wrapper {
grid-template-columns: 1fr;
margin-left: 10px;
margin-right: 10px;
}
/* on small screen we don't display the image */
#form_left {
display: none;
}

}

У меня также есть код для входных данных, но это простой гибкий дисплей и выравнивание по центру их цветов.
Я пробовал менять медиафайлы следующим образом:

Код: Выделить всё

@media (max-width: 576px) {
#form_wrapper {
padding: 43px 50px 57px 117px;
}
}

@media (max-width: 480px) {
#form_wrapper {
padding: 43px 50px 57px 15px;
}
}

@media (max-width: 360px) {
#form_wrapper {
padding: 43px 50px 57px 15px;
margin-left: 20px;
margin-right: 20px;
}
}

Все равно не работает. Это не меняется...

Подробнее здесь: https://stackoverflow.com/questions/782 ... onsive-bug