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) {



}

并在两者之间根据需要修改图像，阅读媒体查询以便更好地理解！

固定元素在Shopify上的定位

1 个答案: