0

I am throwing together a landing page for a startup. I used flexbox to put my site together and it looks great on desktop but in a mobile device it stacks the entire site so that the background image and the elements of the page are not where they are supposed to be. If you could help me out that would be awesome! (i kept the head and java script links out of this)

screenshot Android Chrome

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>
Don Robinson
  • 1
  • 2
  • I can't seed what is wrong with your snippet. It looks good on mobile device. – enbermudas Jul 12 '18 at 20:41
  • I had some people say it looks ok.. personally I have an S7 Edge and it shows up distorted on chrome.. and i should clarify. The test and button that are on the page show up below the background image. as if the background image was pulled up like a shade and the text is below it on white. – Don Robinson Jul 12 '18 at 21:55
  • the site is zoliesq.github.com – Don Robinson Jul 12 '18 at 22:51
  • I repeat, it looks nice in every single resolution. You could add a screen to your question so ican see what you meant because i'm lost right now. – enbermudas Jul 13 '18 at 12:02
  • Done! Thanks for your help ahead of time! – Don Robinson Jul 13 '18 at 20:05
  • @DonRobinson background-attachment:fixed has lot of issues in mobile. Please look at this approach https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile – karthick Jul 13 '18 at 20:31
  • I used the HTML fix that was on that thread. As I am fairly new to this, how does changing the "fixed" tag from the url line to a position:fixed change how it's displayed? or is it the same thing? Also, the display:block seems puts the background in a block, which is what I am assuming really makes the difference. I just want to understand so I can learn from this. – Don Robinson Jul 14 '18 at 09:43

0 Answers0