Проблема такая есть блок с шириной экрана 1280px там всё работает нормально, но при мобильной верски всё съезжает, как и при большом разрешении экрана 1920px, есть ли способ все сделать минимальным использованием @media screen так как если писать под каждое разрешение и плюс кроссбраузерно то получается очень много, как можно сделать сразу нормально вот код на jsfiddle
.call-color-employees {
background-color: #e8e8e8;
padding-bottom: 50px;
}
.top-one-block {
position: relative;
padding-top: 7vw;
}
.top-rect {
background-color: #00c4ff;
width: 100%;
position: absolute;
color: #ffffff;
left: 0;
overflow: hidden;
padding-top: 500px;
}
.top-rect:after {
content: "";
display: block;
background: #e8e8e8;
height: 360px;
width: 8000px;
position: absolute;
z-index: 1;
bottom: -55%;
left: 50%;
margin-left: -4000px;
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
.top-rect:before {
content: "";
display: block;
background: #e8e8e8;
height: 360px;
width: 8000px;
position: absolute;
z-index: 1;
top: -53%;
left: 50%;
margin-left: -4000px;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.top-rect h1 {
position: absolute;
top: 80px;
left: 200px;
width: 100%;
font-size: 55px;
font-weight: 500;
color: white;
z-index: 1;
font-size: 4vw;
font-family: 'Baloo Bhaijaan', cursive;
text-shadow: 2px 0px 3px black;
}
.bottom-title {
height: 400px;
position: relative;
}
.bottom-title h1 {
color: #fff;
font-size: 25px;
font-weight: 500;
text-align: center;
padding-top: 30px;
}
.fun {
text-align: center;
margin-top: 15px;
}
.bottom-title p {
position: absolute;
width: 700px;
text-align: end;
top: 190px;
left: 300px;
color: white;
font-size: 2.5vw;
}
.split-prace {
color: #6f6c6c;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid call-color-employees top-one-block">
<div class="row">
<div class="col-12">
<div class="top-rect">
<h1>A nice div to try out!</h1>
</div>
<div class="bottom-title">
<p>Try resizing the browser to see this text and the image rearrange for optimal viewing. </p>
</div>
</div>
</div>
</div>
</body>
<html>
@media
манипулировать практически только размером шрифтов.@media
? У вас просто позиционирование неправильное. И я тоже работаю и не всегда есть время дать работающий ответ.