The problem is there is a block with a screen width of 1280px; everything works fine there, but with a mobile version, everything moves out, as with a large screen resolution of 1920px, is there a way to make everything minimal using @media screen as if you write for each resolution plus cross browser, a lot, as you can do right away here is the code on 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>

  • You need to typeset so that in @media practically manipulate only the size of the fonts. - Artem Gorlachev
  • @Artem Gorlachev was lucky to do it yourself, but in general you do not need to write the meaning in the same way as without explaining anything, the purpose of this portal is not to impress, but to help - Vadim
  • the meaning of the comment is to direct the correct path. That is why he is a comment and not an answer. And by the way in the question it is not clear what you want to do, and what does @media mean of it? Your positioning is just wrong. And I also work and there is not always time to give a working answer. - Artem Gorlachev

1 answer 1

ready corrected in these blocks I hope someone will help

 } .top-rect h1 { position: absolute; top: 80px; text-align: center; text-align: -webkit-center; width: 100%; font-size: 3.5rem; font-weight: 500; color: white; z-index: 1; font-size: 4vw; font-family: 'Baloo Bhaijaan', cursive; text-shadow: 2px 0px 3px black; } .bottom-title p { position: absolute; width: 90%; text-align: end; top: 190px; color: white; font-size: 2.5vw; }
and added

 @media only screen and (max-width: 720px){ .top-rect h1 { font-size: 3.5rem; } .bottom-title p { font-size: 6.5vw; }
Below is a working example.
 .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; text-align: center; text-align: -webkit-center; width: 100%; font-size: 3.5rem; 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: 90%; text-align: end; top: 190px; color: white; font-size: 2.5vw; } .split-prace { color: #6f6c6c; } @media only screen and (max-width: 720px){ .top-rect h1 { font-size: 3.5rem; } .bottom-title p { font-size: 6.5vw; } 
 <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>