BigCommerce California Responsive Mobile Rendering Probleme

Question

Ich habe also eine Frage bezüglich der Darstellung meines BigComemrce Theme auf mobilen und Tablet-Geräten. Wenn Sie auf Desktop auf findmethatwine.com gehen, sehen Sie neben den Menüoptionen 2 Inhaltsabschnitte 1 für kostenlose Lieferung und 1 für eine Geld-zurück-Garantie.

Von dem, was ich sehen kann, sind diese aus den unten genannten "page menu" Div-Klassen. Mein Problem ist, dass ich nicht herausfinden kann, wie man das in der mobilen Version des Themas richtig repliziert. Wenn ich versuche, den Inhalt erscheinen zu lassen, aber keine Menge an Tüftelungen mit Größen, die ich tun kann, wird der Inhalt ordentlich in dem leeren Raum sitzen, den ich neben dem Logo auf dem Mobile-Size-Rendering erstellt habe. (Für Einzelheiten, wie ich bewegt, dass Logo sehen über diesen Beitrag Responsive design on California Responsive BigCommerce template

Vielen Dank im Voraus für irgendwelche Vorschläge oder Empfehlungen für einen Anfänger aber begeistert Inhaber einer Website!

<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

Fügen Sie den folgenden CSS in Ihrem responsive.css und es entsprechend anpassen Da Stile hinzugefügt werden inline so in wenigen Attributen ich muss wichtig;.!?

@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; 
     } 
}