Question

我在www有一个网站。 structuredata。 COM

当网站在桌面上时，它看起来很棒。然而，当它开始变窄时，红色的“注册”按钮开始与菜单重叠，我想在我的CSS中进行媒体查询，当在较小的屏幕上查看时，该按钮会强制按钮在导航下方下拉。我该怎么做？

标题设置为

<div id="header_main">
   <div class="container">
     <div class="inner-container">
      <strong class="logo"></strong>
      <nav class="main_menu"></nav>
      <div id="text-8" class="widget"> BUTTON IS HERE </div>
     </div>
   </div>
</div>

我尝试设置我的.header_main.widget

显示：块和内联块但不起作用。我试了一下：两者都在上面。

Answer 1

媒体查询可能很棘手，您可以阅读很多关于它们的信息here(w3c)和here(mdn)

在您的情况下，媒体查询将如下所示：

@media screen and (max-width:320px) {
    #header_main .container .inner-container .widget {
        /*Styles go here*/
    }
}

希望这有帮助！

Answer 2

您的导航栏和按钮位于不同的z-index上，这样会很棘手。这也是clear无效的原因。

您可以设置媒体查询来调整按钮的top位置（因为它位于相对位置），如下所示：

@media screen and (max-width: 700px) /*Or whenever the button overlaps*/ {
  #header .widget .avia-button-wrap {
      top: 50px !important; 
   }
}

但是，您可能需要调整标题中的其他元素以使一切看起来都不错。但这应该让你开始！

站点变窄时更改菜单浮动（响应）

2 个答案: