title: Make website fit mobile or any screen size?
body: <p>I need help to scale this to any screen size (its for a project)
  whenever I resize browser it messed up elements, can you help me so I can just copy and paste it back onto my editor</p>
  
  <p>absolute elements get pushed off screen</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-js lang-js prettyprint-override"><code>    $(function() {
                      
                      var documentEl = $(document),
                          fadeElem = $('.fade-scroll');
                      
                      
                      documentEl.on('scroll', function() {
                          var currScrollPos = documentEl.scrollTop();
                          
                          fadeElem.each(function() {
                              var $this = $(this),
                                  elemOffsetTop = $this.offset().top;
                              if (currScrollPos &gt; elemOffsetTop) $this.css('opacity', 1 - (currScrollPos-elemOffsetTop)/250);
                          }); 
                      });
                      
                  });
              </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body{
        padding:0px;
              margin:0px;
        overflow-x: hidden;
        cursor:auto;
        
        
        
       }
      .Paralax-1{
               background:url(https://static.pexels.com/photos/249360/pexels-photo-249360.jpeg) no-repeat center center fixed;
            background-size: cover;
            height:680px;
            
           }
            .Parainner1{
               
               padding-bottom:500px;
          
           }
       .Paralax-2{
        background:url(https://images.pexels.com/photos/187107/pexels-photo-187107.jpeg?w=1260&amp;h=750&amp;auto=compress&amp;cs=tinysrgb) no-repeat center center fixed;
            background-size: cover;
            height:580px;
       }
       .Parainner2{
               
               padding-bottom:200px;
          
           }
       .title{
        font-size:60px;
        text-align:center;
        margin:-16px 300px;
        padding-top:250px;
              border-bottom-width:4px;
              border-bottom-style:solid;
        color:rgba(42,42,42,1.00);
        font-family: 'Roboto Condensed', sans-serif;transition: color 0.5s ease;}
              
              .title:hover{
                  color:rgb(255, 255, 255);
              
       }
       .subtitle{font-size:40px;
        position:absolute;
           top:328px;
        right:490px;
           z-index:3;
        text-align:left;
        margin:-16px 300px;
        padding-top:20px;
        color:rgba(42,42,42,1.00);
        font-family: 'Open Sans', sans-serif;
        transition: color 0.5s ease;}
       
           .subtitle:hover{
                  color:rgba(236,94,104,1.00);
              
       }
       .subtitle2{font-size:40px;
        position:absolute;
           top:328px;
        right:345px;
           z-index:2;
        text-align:center;
        margin:-16px 300px;
        padding-top:20px;
        color:rgba(42,42,42,1.00);
        font-family: 'Open Sans', sans-serif;
        transition: color 0.5s ease;}
       
           .subtitle2:hover{
                  color:rgba(55,100,211,1.00);
              
       }
       .subtitle3{font-size:40px;
        position:absolute;
           top:328px;
        right:190px;
           z-index:1;
        text-align:right;
        margin:-16px 300px;
        padding-top:20px;
        color:rgba(42,42,42,1.00);
        font-family: 'Open Sans', sans-serif;
        transition: color 0.5s ease;}
           
       
       
           .subtitle3:hover{
                  color:rgba(62,221,74,1.00);
              
       }
       #slide1{
        margin: 0px;
        padding-top: -50px;
        height:325px;
        background-color:white;
        
       }
       #slide1head{
        font-size:50px;
        text-align: center;
        font-family: 'Lato', sans-serif;
        -webkit-animation-timing-function: ease;
              -webkit-animation-name: c1; /* Chrome, Safari, Opera */
              -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
              -webkit-animation-iteration-count: 1;
              position: relative;
              transition: 0.5s;
        
        
       }
       #slide1head:hover{
        transform: scale(1.2);    
       }
       #slide1para{
        text-align: center;
        color: dimgrey;
        font-size: 23px;
        font-family: 'Raleway', sans-serif;  
        
        
       }
       #slide1foot{
        font-size:26px;
        text-align: center;
        font-family: 'Lato', sans-serif;
        
       }
       .ih{
        z-index:4;
        float: center;
        margin-left:30%;
        margin-top:2%;
        -webkit-animation-timing-function: ease;
              -webkit-animation-name: c1; /* Chrome, Safari, Opera */
              -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
              -webkit-animation-iteration-count: 1;
              position: relative;
              transition: 0.5s;
       }
       .ih:hover{
        transform: scale(1.1);    
       }
       .ih2{
        text-align: center;
        color: white;
        font-size: 55px;
        font-family: 'Quicksand', sans-serif;  
        padding:0;
        margin:0;
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Wey Education&lt;/title&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans|Oxygen|Raleway|Roboto|Roboto+Condensed" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Dosis|Quicksand|Titillium+Web|Ubuntu" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;style&gt;
      
          &lt;/style&gt;
      &lt;body&gt;
       &lt;/section&gt;
        
          &lt;section class = "Paralax-1"&gt;
          &lt;div class= "Parainner1"&gt;
                 &lt;h1 class = "title"&gt;Wey Education&lt;/h1&gt;
                 &lt;h3 class = "subtitle"&gt;Aspire&lt;/h3&gt;
                 &lt;h3 class = "subtitle2"&gt;Believe&lt;/h3&gt;
                 &lt;h3 class = "subtitle3"&gt;Achieve&lt;/h3&gt;
                 
          &lt;/div&gt;
          &lt;/section&gt;
          &lt;div id = "slide1"class="fade-scroll"&gt;
          &lt;h1 id="slide1head" class="fade-scroll"&gt;Wey Education&lt;/h1&gt;
           &lt;p id="slide1para" class="fade-scroll"&gt;Wey Education is an educational services group that is passionate about the &lt;br&gt; transformative power of education. We believe that by driving up the academic &lt;br&gt; standards, we can improve the life chances and opportunities for young people.&lt;br&gt;We are commited to shaping the future of education as well as online learning, &lt;br&gt; and bringing an innovative approach to audiences across the globe.  &lt;/p&gt;
           &lt;h3 id="slide1foot" class="fade-scroll"&gt;Our current ongoing projects:&lt;/h3&gt;
          &lt;/div&gt;
          
      &lt;section class ="Paralax-2"&gt;
           &lt;div class="Parainner2"&gt;
               &lt;a href="http://www.interhigh.co.uk/" target="_blank"&gt;
            &lt;img class="ih" src ="http://www.interhigh.co.uk/wp-content/uploads/2015/07/InterHigh_est.png"&gt;
            &lt;/a&gt;
            &lt;h2 class="ih2"&gt;The UK's #1 Online Secondary School&lt;/h2&gt;
           &lt;/div&gt;
          &lt;/section&gt;
          
    
             
          
      &lt;/body&gt;
   
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>