Блок для ввода текста для поста на html css?

Question

[ivangerasimov00]

Сделал всплывающее окно для ввода текста на css, но для телефонов оно слишком большое, как я могу сделать адаптированный блок для ввода текста для пк и андроид?
html:

<form method='POST'>
<a href='javascript:void(0)' class='closepst' onclick='closePost()'>×</a>
<input type='text' name='post' placeholder='Введите текст..' ></input>
<h3><button style='background: #FFFFFF; color: black;  border: 1px solid #FFFFFF;' type='submit'  name='postes_public'>опубликовать</button></h3>
</form>

CSS для андроид:

.checkPost input{
     position: relative;
    font-family: helvetica;
    left: 20%;
    transform: translate(-50%, 0);
	width:300px;
    border-radius: 5px;
    padding: 65px 10px;
    text-decoration: none;
    font-size: 15px;
}

CSS для пк:

.checkPost input{
     position: relative;
    font-family: helvetica;
    left: 50%;
    transform: translate(-50%, 0);
	width:100%;
    border-radius: 5px;
    text-decoration: none;
    font-size: 15px;
}

скрыть/показать окно (java):

function openPost() {
    

    document.getElementById("mySidepost").style.width = "400px";
    document.getElementById("mySidepost").style.padding = "149px";
    document.getElementById("mySidepost").style.margin = "5px 5px 0px";
}
function closePost() {
    document.getElementById("mySidepost").style.width = "0";
    document.getElementById("mySidepost").style.padding = "0";
    document.getElementById("mySidepost").style.margin = "0px";
}

Comments

[Kvason]

скрыть/показать окно (java)

.

Answer 1

[lookfortheroot]

Сделать ширину окошка 100vw, но установить лимит в 400px. Тогда влезет во всё, что меньше (с поправкой на содержимое и отступы)

function openPost() {
    document.getElementById("mySidepost").style.width = "100vw";
    document.getElementById("mySidepost").style.maxWidth = "400px";
    [...]
}

Если установлен margin, то будет переполнение по ширине. Нужно вычитать:

document.getElementById("mySidepost").style.width = "calc(100vw - 10px)";

А вообще, немного странно скриптами выполнять работу CSS. Намного лучше эти параметры перенести в стили.