Медиа-запрос не работает при стилизации формы ниндзя в Wordpress

Question

Новичок здесь, так что извиняюсь, если я ошибаюсь здесь.

Я создаю веб-сайт WordPress для клиента и пытаюсь стилизовать контактную форму (в настоящее время с помощью плагина формы Ninja). С базовой версией легко иметь два поля в одной строке, но я хочу сделать это для мобильного представления, сделать файл правого поля аккуратно внизу в один столбец.

Соответствующий CSS в плагине ниже:

.nf-form-cont {
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
    clear: initial;
    float: left;
    margin-left: 2.564102564102564%;
    .inside {
        padding: 20px;
    }
    &::after {
        clear: both;
        content: "";
        display: block;
    }
}

.one-half,
.three-sixths,
.two-fourths {
    width: 48.717948717948715%;
}

Я написал CSS ниже, что делает второе поле ниже первого и убирает поле:

.one-half {
    margin-left:0;
    width: 100%;
}

Это работает нормально, пока я не помещу в медиа-запрос, например, так:

@media only screen and (max-width: 719px) {

.one-half {
    margin-left:0;
    width: 100%;
    }
}

Прочитав другие вопросы здесь, я полагаю, что проблема может быть связана с необходимостью идентификатора в медиа-запросе, но я попробовал множество идентификаторов, но безуспешно. Когда я использую Inspect в Google для проверки кода, медиазапрос, похоже, даже не существует.

Надеюсь, что кто-то может пролить свет на это! Благодарю.

Answer 1

Пытаться:

.one-half {
    margin:0;
    width: 48%;
    display:block;
}

Answer 2

Добавьте следующий код в конец вашего внешнего вида-> Дополнительные Css

    @media screen and (max-width : 680px){
     .one-fourth {
           min-width: 100%;
           display:block;
        }
    }