Question

我将启动页面集中在一起。我使用flexbox将我的网站放在一起，它在桌面上看起来很棒，但是在移动设备中，它会堆叠整个网站，这样背景图像和页面元素就不会出现在原处。如果您能帮助我，那就太好了！（我保留了head和java脚本链接除外）

body {
  background: url(kidtrophy.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #F17442CC;
  text-shadow: 2px 2px black;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  font-family: 'Graduate', cursive;
}

.container {
  height: 100%;
  width: 100%;
  flex-direction: column;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: flex-end;
  max-width: 2000px;
  flex-basis: 2000px;
}

.btn-primary {
  background-color: #F17442CC;
  border-color: black;
  font-size: 24px
}

.btn-primary:hover {
  background-color: black;
  border-color: white;
}

.clear {
  font-family: 'Graduate', cursive;
}

<body>
  <div class=container>
    <div>
      <!-- Begin MailChimp Signup Form -->
      <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
      <style type="text/css">
        #mc_embed_signup {
          clear: left;
          font: 14px Helvetica, Arial, sans-serif;
        }
        /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
                   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
      </style>
      <div id="mc_embed_signup">
        <form action="https://hometeamsupply.us18.list-manage.com/subscribe/post?u=d1801099dfea9077af487f192&amp;id=18d80a3cb8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
          <div id="mc_embed_signup_scroll">
            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d1801099dfea9077af487f192_18d80a3cb8" tabindex="-1" value=""></div>
            <div class="clear"><input class="btn btn-primary" type="submit" value="Find out more!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
          </div>
        </form>
      </div>

      <!--End mc_embed_signup-->
      <!-- Button trigger modal -->
    </div>
    <div>Being the team MVP was never this easy!</div><br>
  </div>
</body>

着陆页显示为在移动设备上堆叠

0 个答案: