Как укоротить поле input с сужением экрана

Question

Как укоротить поле input с сужением экрана

Thermodynamix Ученик (73), на голосовании 9 месяцев назад

к примеру у меня есть поле инпут которое имеет длинну 500px, когда я сужаю, блок content становится равен длинне экрана, и когда длинна экрана меньше, блок input уходит за границы, как сделать чтобы он сужался

 @import url('default.css'); 
@font-face { 
    font-family: Geologica; 
    src: url('../fonts/Geologica.ttf'); 
} 
body{ 
    background: #efefef; 
    font-family: "Geologica"; 
} 
h1{ 
    font-weight: 900; 
    letter-spacing: 2px; 
    color: #000000; 
} 
header{ 
    width: 100%; 
    height: 70px; 
    background: #ffffff; 
    display: flex; 
    justify-content: center; 
} 
header .container{ 
    width: 1200px; 
    border-left: 1px solid #fff; 
    border-right: 1px solid #fff; 
    height: 100%; 
    padding: 10px; 
    display: flex; 
    align-items: center; 
} 
header .container .headerImgLogotype{ 
    width: 50px; 
    height: auto; 
    margin: 0px 10px 0px 0px; 
} 
.title{ 
    display: flex; 
    align-items: center; 
} 
.navigation{ 
    display: flex; 
    align-items: center; 
    margin: 0 0 0 40px; 
} 
.navigation li a{ 
    font-family: 'Geologica'; 
    font-size: 23px; 
    font-weight:600; 
    color: #5f5f5f; 
    margin: 0px 10px; 
} 
.input-search-model-block{ 
    width: 50%; 
    max-width: 500px; 
} 
.input-search-model{ 
    border: 1px solid #a0a0a0; 
    height: 35px; 
    width: 100%; 
    border-radius: 6px; 
    display: flex; 
    font-size: 20px; 
    padding: 0 0 0 35px;  
    margin: 30px; 
    font-weight: 600; 
    background: url('../img/magnifier.svg') 0 0 no-repeat; 
}

Answer 1

Krutoy Snegovik Ученик (136) 10 месяцев назад

Хз, я вообще считаю что HTML инвалидный

Answer 2

.input-search-model {
border: 1px solid #a0a0a0;
height: 35px;
width: 100%;
border-radius: 6px;
display: flex;
font-size: 20px;
padding: 0 0 0 35px;
margin: 30px;
font-weight: 600;
background: url('../img/magnifier.svg') 0 0 no-repeat;
}

/* Медиазапрос для сужения поля ввода на меньших экранах */
@media screen and (max-width: 600px) {
.input-search-model {
width: 80%; /* Измените значение ширины по вашему усмотрению */
margin: 10px; /* Измените значение отступа по вашему усмотрению */
}
}