时间戳

首页 > 解决方案 > 切换到移动设计时如何将主体内容移到页面下方？

html - 切换到移动设计时如何将主体内容移到页面下方？

问题描述

当我的网站转到 850 像素时，它会切换到移动设计，问题是我有一个按钮同时出现在桌面和移动模式下，但是当它处于移动设计的开始时，即 850 像素时，该按钮隐藏在标题横幅下。我想把整个网站的主体内容下推。我可以使用 CSS 属性在桌面模式下执行此操作 -margin-top: 200px我想知道是否有任何@media或任何其他类型的代码可以仅为移动设计更改此设置。

我发现如果我输入它的代码<br>确实会改变它，但肯定有比只<br>在按钮代码中添加一些更好的方法，即使这样也会改变它以用于桌面设计。

对不起，如果我的解释没有多大意义。

如果这有帮助，我将显示我的按钮代码，如果需要任何其他代码来帮助，任何人都可以告诉我。

<!--Button Code Start-->
<div class="quote-button-main">
  <center>
    <style>
      .quote-button-main .button {
        display: inline-block;
        border-radius: 20px;
        background-color: #45C236;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 20px;
        padding: 15px;
        width: auto;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
      }

      .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
      }

      .button span:after {
        content: '\00bb';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
      }

      .button:hover span {
        padding-right: 26px;
      }

      .button:hover span:after {
        opacity: 1;
        right: 0;
      }
    </style>

    <a href="products.asp" <button class="button" style="vertical-align:middle"><span>CLICK HERE FOR A NO OBLIGATION INSTANT QUOTE!</span></button> </a>

  </center>
</div>
<!--Button Code END-->

再次感谢您的帮助！

桌面模式 桌面模式 的屏幕截图： 移动模式的屏幕截图，带有隐藏在顶部横幅下的按钮：

移动设计

标签： htmlcssmedia-queries

解决方案

好吧，只需将内容包装器的上边距放入其他 CSS 规则下方的媒体查询中，类似于以下内容：

@media screen and (max-width: 850px) {
  .yourcontentdiv {
    margin-top: 200px;
  }
}

推荐阅读