當在Wordpress中設計忍者形式時，媒體查詢不起作用

新手在這裏，所以如果我在這裏得到任何問題都道歉。當在Wordpress中設計忍者形式時，媒體查詢不起作用

我正在爲客戶建立一個wordpress網站，並試圖設計聯繫表格（目前使用忍者表格插件）。使用基本版本，很容易在一行中包含兩個字段，但我想要做的是針對移動視圖，將右側字段文件整齊排列在一個列中。

在插件的相關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%; 
    } 
}

從閱讀其他問題在這裏，我認爲這個問題可能與在媒體查詢中需要一個ID有關，但我已經嘗試了很多ID而沒有成功。當我在Google上使用Inspect來檢查代碼時，媒體查詢似乎不存在。

希望有人能對此有所瞭解！謝謝。

來源

2016-11-28 Simon

你能後的HTML標記呢？ – WillardSolutions

@EatPeanutButter有一些JavaScript負載（不幸的是我還沒有學會編寫代碼） - 你需要什麼？ – Simon

嘗試：

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

來源

2016-11-28 19:40:32

嗨P塞巴斯蒂安 - 這不能真正解決問題不幸的是 - 問題是放置在媒體查詢時代碼無法正常工作。我認爲這與沒有ID有關，但我可能是錯的！ – Simon

檢查[linl] http://cssmediaqueries.com/overview.html –

嘗試示例：@media screen和（min-width：320px） –

下面的代碼添加到您的appearance-底部>額外的CSS

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

來源

2017-11-15 14:20:51 Radhe9254

當在Wordpress中設計忍者形式時，媒體查詢不起作用

回答

相關問題