Question

所以我对移动设备和平板电脑设备上的BigComemrce主题渲染有疑问。如果您在桌面上转到findmethatwine.com，您会看到菜单选项旁边的2个内容部分1，免费送货，1个退款保证。

从我所看到的，这些由以下＆＃34; pagemenu＆＃34;组成。 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

在您的responsive.css中添加以下css并进行相应调整。由于样式是内联添加的，因此我必须使用少量属性！important;

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

BigCommerce California响应式移动渲染问题

1 个答案: