850px移动端适配：主体内容被头部遮挡的CSS解决方案

完全可以通过CSS媒体查询（@media）来针对性调整，这比用<br>标签要优雅得多，不会影响桌面端的布局。下面是具体的解决步骤：

1. 用媒体查询调整主体/按钮容器的间距 #

你可以针对屏幕宽度≤850px的情况，单独给页面主体或者按钮所在的容器增加margin-top，以此避开头部横幅的遮挡。

方案一：调整整个页面主体的间距（推荐） #

如果你的页面有统一的主体容器（比如类名为main-content），可以这样写：

/* 桌面端原有样式 */
.main-content {
  margin-top: 200px;
}

/* 移动端断点（≤850px）的修正样式 */
@media (max-width: 850px) {
  .main-content {
    margin-top: 280px; /* 数值可以根据头部实际遮挡情况调整 */
  }
}

方案二：仅调整按钮容器的间距 #

如果只想针对按钮所在的区域调整，给.quote-button-main加媒体查询样式：

@media (max-width: 850px) {
  .quote-button-main {
    margin-top: 80px; /* 按需设置足够的上间距，避开头部 */
  }
}

2. 修复按钮代码的语法错误 #

另外注意你当前的按钮代码有个小问题：<a>标签没有闭合，应该改成这样：

<!--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-->

为什么不用<br>标签？ #

<br>是硬换行，会在所有屏幕尺寸下都添加额外间距，破坏桌面端的原有布局；而媒体查询是响应式的，只会在指定的屏幕宽度范围内生效，是解决这类问题的标准最优方案。

你可以根据头部横幅在移动端的实际高度，微调margin-top的数值，测试不同尺寸的屏幕确保按钮完全显示即可。

内容的提问来源于stack exchange，提问作者Kieran