Two fields have a margin-right: 20px , with a media query resetting the margin-right: 0 property, but the indents remain as they were. I suspect that this is due to the collapse of indents выбирается больший margin-right: 20px , so zeroing and a negative margin do not help. Tell me, how can I solve this problem?

  @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>

    1 answer 1

    Move your media queries under the basic styles.

     .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; } @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: 0; } } .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>

    • Thanks, earned! - Riccu