html - 修复了 Shopify 上的元素定位

Question

我的问题在这里:https://paper-boy-posse-2.myshopify.com/

我试了又试，但无法使我的选取框(固定元素的橙色和灰色横幅)居中或响应。正如您所看到的，当您减小屏幕尺寸时，它不再覆盖轮播的顶部，而是向右移动。当它是正常屏幕尺寸时，它甚至不居中。

所以我的问题是。我怎样才能制作这个固定元素: - 居中 - 响应式(因此它保持覆盖轮播的顶部)

我的代码如下。

<!-- Begin right navigation -->
  {% if settings.navigation_alignment == "right" %}
  <div class="row" id="header">
    <div class="span12 border-bottom">
      <div class="span12" style="margin-top:50px;">
            <div class="logo">
                <img src="http://img69.imageshack.us/img69/4620/gcl6.png"/>
            </div>
      </div> 
    </div>
  </div>


  {% endif %}
  <!-- End right navigation -->

Answer 1

如果您想更改横幅的位置并调整其大小以覆盖轮播，请使用媒体查询。

@media screen and (max-width: 600px) {



}

在根据需要修改图像之间，阅读媒体查询以获得更好的理解!