У двух полей есть margin-right: 20px
, медиа-запросом обнуляем свойство margin-right: 0
, но отступы остаются как и были. Подозреваю, что это происходит из-за схлопывания отступов выбирается больший margin-right: 20px
, поэтому обнуление и отрицательный margin
не помогают.
Подскажите, как можно решить данную проблему?
@media screen and (max-width: 992px) {
.c-main-info__field {
flex-basis: 100%;
}
.c-main-info__field:not(:nth-last-of-type(-n+2)){
margin-right: -20px;
}
}
.container{
display: flex;
flex-direction: column;
width: 70%;
background-color: blue;
padding: 2% 2%;
margin: auto;
}
.c-main-info__fields{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 15px;
}
.c-main-info__field {
display: flex;
position: relative;
color: #aaa;
font-size: 11px;
padding-top: 12px;
flex-grow: 1;
}
.c-main-info__field:not(:nth-last-of-type(-n+2)){
margin-right: 20px;
}
.c-main-info__textarea{
padding-top: 15px;
width: 100%;
/* flex-grow: 3; */
}
.c-main-info__textarea .c-main-info__input{
font-family: inherit;
resize: none;
overflow: auto;
padding-top: 23px;
height: 90px;
}
.c-main-info__input {
height: 30px;
padding-bottom: 0;
padding-top: 20px;
padding-left: 11px;
background-color: #f7f7fa;
border-radius: 5px;
border: none;
width: 100%;
font-weight: 600;
}
.c-main-info__input:hover{
background-color: #eaeaee;
}
.c-main-info__label {
color: gray;
position: absolute;
top: 20px;
left: 12px;
}
.c-main-info__input::-webkit-input-placeholder {
color: #c4c4c4;
font-size: 15px;
font-weight: 300;
}
.button-wrapper{
display: flex;
justify-content: left;
}
<body>
<div class="container">
<div class="c-main-info__fields">
<div class="c-main-info__field c-main-info__group">
<input type="text" class="c-main-info__input" id="group" placeholder="Введите название группы">
<label class="c-main-info__label" for="group">Название группы</label>
</div>
<div class="c-main-info__field c-main-info__fio">
<input type="text" class="c-main-info__input" id="fio" placeholder="Введите ФИО">
<label class="c-main-info__label" for="fio">ФИО ответственного</label>
</div>
<div class="c-main-info__field c-main-info__email">
<input type="text" class="c-main-info__input" id="email" placeholder="Введите e-mail">
<label class="c-main-info__label" for="email">Email для входа</label>
</div>
<div class="c-main-info__field c-main-info__textarea">
<textarea class="c-main-info__input" rows="5" id="work-group" placeholder="Введите краткое и емкое описание рабочей группы"></textarea>
<label class="c-main-info__label" for="work-group">Описание рабочей группы</label>
</div>
</div>
</div>
</body>