2

У двух полей есть 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>

1 ответ 1

2

Переместите ваши media запросы под основные стили.

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

1
  • Спасибо, заработало!
    – Riccu
    Commented 18 авг. 2018 в 15:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.