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
absolute elements get pushed off screen
$(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 > elemOffsetTop) $this.css('opacity', 1 - (currScrollPos-elemOffsetTop)/250);
});
});
});
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&h=750&auto=compress&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;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wey Education</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans|Oxygen|Raleway|Roboto|Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis|Quicksand|Titillium+Web|Ubuntu" rel="stylesheet">
</head>
<style>
</style>
<body>
</section>
<section class = "Paralax-1">
<div class= "Parainner1">
<h1 class = "title">Wey Education</h1>
<h3 class = "subtitle">Aspire</h3>
<h3 class = "subtitle2">Believe</h3>
<h3 class = "subtitle3">Achieve</h3>
</div>
</section>
<div id = "slide1"class="fade-scroll">
<h1 id="slide1head" class="fade-scroll">Wey Education</h1>
<p id="slide1para" class="fade-scroll">Wey Education is an educational services group that is passionate about the <br> transformative power of education. We believe that by driving up the academic <br> standards, we can improve the life chances and opportunities for young people.<br>We are commited to shaping the future of education as well as online learning, <br> and bringing an innovative approach to audiences across the globe. </p>
<h3 id="slide1foot" class="fade-scroll">Our current ongoing projects:</h3>
</div>
<section class ="Paralax-2">
<div class="Parainner2">
<a href="http://www.interhigh.co.uk/" target="_blank">
<img class="ih" src ="http://www.interhigh.co.uk/wp-content/uploads/2015/07/InterHigh_est.png">
</a>
<h2 class="ih2">The UK's #1 Online Secondary School</h2>
</div>
</section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</html>
