Позиция CSS исчезает на экране мобильного телефона ⇐ Html

[Anonymous]

Перейду к делу:
Здравствуйте. Я создаю страницу для своей школы, где можно записывать задания, тесты и т. д., чтобы мы могли их запомнить.
Я хочу сделать ее простой в использовании, поэтому хотел адаптировать ее для мобильных устройств, однако у меня возникли некоторые проблемы с ПОЛОЖЕНИЕМ ЭЛЕМЕНТОВ в CSS; Когда я запускаю проект в VSC на своем ноутбуке, каждая кнопка, каждый значок и все находится на своем месте. Но когда я вижу свою страницу на своем мобильном телефоне, все эти элементы кажутся беспорядочными. Они не на тех позициях, на которых должны быть.
Поэтому я хотел спросить: что я делаю плохо? если бы вы могли мне помочь, я был бы вам очень благодарен. Спасибо за чтение.
/* Вот вид с компьютера */




/* И мобильное представление */




html, body {
height: 100%;
margin: 0;
padding: 0;
}

.body {
background: linear-gradient(to bottom, #1a2932, #170c22);
font-family: 'Fredoka One', sans-serif;
}

#line {
position: absolute;
width: 1400px;
height: 3px;
background-color: rgb(0, 255, 110);
top: 540px;
}

.botónes_fijos {
position: relative;
width: 40px;
height: 28px;
bottom: 11%;
right: -50%;
font-size: 24px;
font-weight: bold;
background-color: rgb(0, 255, 110);
color: #1a0236;
transition: 0.2s;
border: none;
border-radius: 6px;
transform-origin: center;
}

.botónes_fijos:hover {
background-color: rgb(145, 18, 249);
color: #ffffff;
}

#botón_fijo_1.expandido {
transform: scale(1.5);
}

#submenu_1 {
position: absolute;
display: none;
transform-origin: center;
top: 8%;
right: 24%;
background: linear-gradient(to bottom, #1a2932, #170c22);
border: 2px solid #ffffff;
border-radius: 2px;
width: 600px;
height: 350px;
}

.input_submenu {
background-color: #ffffff;
border: 2px solid #ffffff;
outline: none;
}

.input_submenu:focus {
border: 3px solid rgb(0, 255, 110);
}

#botón_submenu_listo {
position: relative;
top: 446px;
right: 600px;
font-family: 'Fredoka One';
background-color: rgb(0, 255, 110);
width: 96px;
height: 40px;
color: #1a0236;
border: 3px solid #ffffff;
border-radius: 2px;
z-index: 1;
}

#input_submenu_1 {
position: relative;
border-radius: 2px;
transform-origin: center;
top: 180px;
right: 500px;
width: 320px;
height: 22px;
color: #1a0236;
font-family: 'Fredoka One', sans-serif;
transition: 0.2s ease-out;
}

#input_submenu_1:focus {
transform: scaleX(1.07);
}

#submenu_titulo_1 {
position: absolute;
font-size: 34px;
font-weight: 1000;
letter-spacing: 2px;
color: #ffffff;
right: -20%;
top: -200%;
font-family: 'Fredoka One';
z-index: 2;
}

#submenu_titulo_2 {
position: relative;
right: 830px;
top: 262px;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
color: #ffffff;
font-family: 'Fredoka One';
}

#submenu_titulo_3 {
position: relative;
right: 360px;
top: 260px;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
color: #ffffff;
font-family: 'Fredoka One';
}

#submenu_botón_salir {
width: 24px;
height: 24px;
text-align: center;
border: none;
border-radius: 2px;
color: #1a0236;
font-weight: bold;
font-size: 14px;
background-color: rgb(255, 0, 144);
}

.dropdown {
position: relative;
display: inline-block;
}

.dropbtn {
position: relative;
right: 800px;
top: 320px;
width: 136px;
height: 22px;
background-color: #ffffff;
color: #1a0236;
padding: 10px 20px;
font-size: 12px;
border: none;
border-radius: 2px;
cursor: pointer;
font-family: 'Fredoka One', sans-serif;
}

.dropdown-content {
display: none;
position: relative;
right: 796px;
top: 342px;
background-color: #ffffff;
min-width: 140px;
border: 2px solid #ffffff;
border-radius: 5px;
z-index: 1;
}

.dropdown-content a {
color: #1a0236;
height: 10px;
padding: 10px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: rgb(0, 255, 110);
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... ile-screen