BigCommerceカリフォルニアレスポンシブルモバイルレンダリングの問題

Question

モバイルとタブレットデバイスのBigComemrceテーマのレンダリングに関する質問があります。 デスクトップのfindmethatwine.comに行くと、メニューオプションの横に2つのコンテンツセクションが表示されます（1つは無料配送、1は返金保証）。

私が見ることのできるところは、以下の「ページメニュー」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> 

Answer 1

あなたの中に次の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; 
     } 
}