BigCommerce California Responsive移動渲染問題

所以我有一個關於移動和平板設備上BigComemrce主題渲染的問題。如果您在桌面上轉到findmethatwine.com，您會在菜單選項旁邊看到2個內容部分1，可免費送貨，另有1個退款保證。BigCommerce California Responsive移動渲染問題

從我所看到的這些由下面的「pagemenu」div類組成。我的問題是，我無法弄清楚如何在主題的移動版本中正確地複製它。嘗試使用時，我可以看到內容，但是我可以做的大小不會隨着尺寸的變化而變化，因此內容可以整齊地放置在我在移動大小渲染上的該徽標旁邊創建的空白空間中。（對於我是多麼感動的是標誌在看到這個帖子Responsive design on California Responsive BigCommerce template

預先感謝任何建議或指導的網站的新手，但熱心的持有人的詳細信息！

<div class="PageMenu">%%Panel.PagesMenu%%</div> 

<div class="PageMenu" style="width: 200px; color: #f3f3f3; font-weight: bold;text-align:center;"> 
     <img src="https://cdn6.bigcommerce.com/s-yg07p8k5b4/product_images/uploaded_images/free-delivery.png?t=1477562519" border="0" id="LogoImage" alt="Free Delivery (minimum purchase applies)"> 
     Spend £150 or<br> buy 12 bottles 
</div> 

<div class="PageMenu" style="width: 200px; color: #f3f3f3; font-weight: bold;text-align:center;"> 
    No quibble money back Guarantee. We will uplift and refund your unwanted bottles* 
</div>

來源

2017-04-27 WineBox

你想這樣的事情https://i.stack.imgur.com/ qMfhS.png –

完全像這樣@SahilDhir很明顯，在空間方面，我可以調整文本和圖像等使用，以使它適合，可讀等。只是努力弄清楚我需要插入的正確代碼，然後我可以確切地在哪裏插入它與試驗和錯誤。 – WineBox

檢查答案並添加css –

添加下面的CSS在你的responsive.css並相應地調整由於樣式在線添加，因此一些屬性我必須使用重要的。！？

@media screen and (max-width: 767px){ 
#Header .Content .PageMenu:nth-child(2) { 
      position: absolute; 
      left: 0px; 
      top: 80px; 
      right: 0px; 
      margin: 0px auto; 
      display: block !important; 
      color: #000 !important; 
      /* width: 100px !important; */ 
} 

#Header .Content .PageMenu:nth-child(3) { 
      position: absolute; 
      right: 0px; 
      top: 70px; 
      display: block !important; 
      color: #000 !important; 
     } 
}

來源

2017-04-27 11:08:28

美麗@SahilDhir。現在只有一個問題就是最小的屏幕尺寸，一旦你低於約538像素，2個元素開始相互重疊。也許我可以設置一些措施來優先考慮免費的傳遞信息，並放棄其他信息？這是Z-Index嗎？ – WineBox

對不起，當向下滾動屏幕時，這些圖像保持靜態覆蓋內容？我寧願他們停留在該菜單欄區域內的頁面頂部，而不是向下滾動屏幕 – WineBox

對於問題1，您可以減少寬度和字體大小以獲得期望的結果。 –

BigCommerce California Responsive移動渲染問題

回答

相關問題