title: How to get a full image landing page to be responsive for mobile view?
body: <p>When testing my landing page on mobile view, there are weird spaces on each side of the image that allows the user to scroll and see white space. How can this be fixed? I just want it to collapse and look nice as one image with text on it on mobile view. Thanks. I want it to look like this <a href="https://www.w3schools.com/howto/tryhow_css_fullpage_demo.htm" rel="nofollow noreferrer">tutorial</a> But I keep getting white space on the sides.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    margin:0;
    padding:0;
  }
  
  .fade-in{
    animation: animationFrames ease 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: animationFrames ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
    -moz-animation: animationFrames ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: animationFrames ease 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: animationFrames ease 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
  }
  
  @keyframes animationFrames{
    0% {
      opacity:0;
      transform:  translate(0px,-25px)  ;
    }
    100% {
      opacity:1;
      transform:  translate(0px,0px)  ;
    }
  }
  
  @-moz-keyframes animationFrames{
    0% {
      opacity:0;
      -moz-transform:  translate(0px,-25px)  ;
    }
    100% {
      opacity:1;
      -moz-transform:  translate(0px,0px)  ;
    }
  }
  
  @-webkit-keyframes animationFrames {
    0% {
      opacity:0;
      -webkit-transform:  translate(0px,-25px)  ;
    }
    100% {
      opacity:1;
      -webkit-transform:  translate(0px,0px)  ;
    }
  }
  
  @-o-keyframes animationFrames {
    0% {
      opacity:0;
      -o-transform:  translate(0px,-25px)  ;
    }
    100% {
      opacity:1;
      -o-transform:  translate(0px,0px)  ;
    }
  }
  
  @-ms-keyframes animationFrames {
    0% {
      opacity:0;
      -ms-transform:  translate(0px,-25px)  ;
    }
    100% {
      opacity:1;
      -ms-transform:  translate(0px,0px)  ;
    }
  }
  
  #showcase{
    background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8Ilf-i2TXplUrTBJ-ugwuyd8X8mxhgMD44UQOvcawkbXx2IzNKBLWVrLA');
    background-size:cover;
    background-position:center;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding: 0 20px;
  }
  
  #showcase h1{
    font-size:50px;
    line-height:1.2;
    color:#fff;
    font-family: montserrat;
    letter-spacing: 10px;
    
  }
  #showcase h2{
    font-size:25px;
    line-height:1.2;
    color:#fff;
    font-family: montserrat;
  }
  
  #showcase .button{
    font-size:18px;
    text-decoration:none;
    color:darkgreen;
    padding: 10px 20px;
    border-radius:10px;
    margin-top:20px
  }
  
  #showcase .button:hover{
    background-color: darkgreen;
    color:#fff;
  }
  
      
  #logo {
      z-index: 1;
      position: absolute;
      float: left;
      height: 30px;
      padding: 7px;
  }/*effects the post logo in the top left of the page*/    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="wrapper fade-in"&gt;
        &lt;header id="showcase"&gt;
          &lt;h1&gt;TITLE HERE&lt;/h1&gt;
          &lt;h2&gt;2017&lt;/h2&gt;
          &lt;a href="landing2.html" class="button"&gt;&lt;i class="fa fa-angle-double-right" style="font-size:36px"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt; </code></pre>
  </div>
  </div>
  </p>