Avada主題引發問題與引導程序斷點

我使用Avada 5.0.6，它似乎是破壞我的引導程序網格的斷點。移動響應中斷點爲800像素寬。但是，根據bootstrap文檔，col-sm- *以768像素開始。所以當我模擬800px寬的屏幕時，我的網格仍然可以工作。但事實並非如此，它將兩個div放在了一起（底部的圖片）。Avada主題引發問題與引導程序斷點

我的HTML：

<div class="col-xs-12 col-sm-3 col-md-3 phonenumbers"> 
    <h2>Phone numbers:</h2> 
    <p>555-555-555</p> 
    <p>555-555-555</p> 
    </div> 
    <div class="col-xs-12 col-sm-3 col-md-3 email"> 
    <h2>Email:</h2> 
    <p>[email protected]</p> 
    <p>[email protected]</p> 
    </div> 
    <br> 
    <div class="col-xs-12 col-md-12"> 
    <h1>Connect with Us!</h1> 
    <p></p> 
    [contact-form-7 id="23" title="Contact Us Form"] 
    </div>

我的CSS：

.phonenumbers { 
    margin-left: 35%; 

} 
.email { 
    margin-left: 10%; 
} 

    @media (max-width: 800px) { 
     .phonenumbers { 
     margin-left: 0; 
     } 
     .email { 
     margin-left: 0; 
     } 
    }

的桌面外觀：

移動的樣子：

來源

2017-02-26 Thomas Hutton

它的工作原理，當你刪除阿瓦達索主題？ – xszaboj

當我用普通的HTML和媒體查詢做它時，它確實有效。 –

電話號碼+電子郵件將在左側，並在右側聯繫？這是你想要的？ –

在Avada中，您可以調整所有內容，包括斷點。它的默認值與Bootstrap的768px不匹配，它是800px。你可以很容易地改變它：

在WP管理員邊欄選擇阿瓦達索
選擇主題選項
在Fusioon阿瓦達索5.0.6左側菜單中選擇響應
調整標題響應斷點和/或網站內容響應斷點與範圍選擇您的需要。

來源

2017-02-28 21:43:25 wscourge

我做到了，仍然是同樣的問題。 –

試試這個

<div class="col-xs-3 col-sm-3 col-md-3 phonenumbers"> 
    <h2>Phone numbers:</h2> 
    <p>555-555-555</p> 
    <p>555-555-555</p> 
    </div> 
    <div class="col-xs-3 col-sm-3 col-md-3 email"> 
    <h2>Email:</h2> 
    <p>[email protected]</p> 
    <p>[email protected]</p> 
    </div> 
    <br> 
    <div class="col-xs-12 col-md-12"> 
    <h1>Connect with Us!</h1> 
    <p></p> 
    [contact-form-7 id="23" title="Contact Us Form"] 
    </div>

直播的jsfiddle https://jsfiddle.net/grinmax_/uqpdb6sL/

來源

2017-03-02 09:40:43 grinmax

Avada主題引發問題與引導程序斷點

回答

相關問題