0

Проблема такая есть блок с шириной экрана 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>

3
  • Нужно верстать так, чтобы в @media манипулировать практически только размером шрифтов. Commented 29 авг. 2017 в 7:12
  • @Artem Gorlachev повезло сделал сам, а вообще смысл писать вы верстаете не так надо как то так не объяснив ничего, цель данного портала не произвести впечетление, а помочь
    – Vadim
    Commented 29 авг. 2017 в 7:26
  • смысл комментария - направить на правильный путь. Именно поэтому он комментарием а не ответом. И кстати в вопросе не понятно что вы хотите сделать, и при чем в нём вообще @media? У вас просто позиционирование неправильное. И я тоже работаю и не всегда есть время дать работающий ответ. Commented 29 авг. 2017 в 8:38

1 ответ 1

-2

готово исправил в этих блоках надеюсь кому поможет

}
.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;
}
и добавил

@media only screen and (max-width: 720px){
    .top-rect h1 {
     font-size: 3.5rem;
    }
    .bottom-title p {
    font-size: 6.5vw;
}
ниже приведен рабочий пример
.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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.