Линейный градиент CSS 50% влево и вправо Вверх и вниз по мобильному выпуску - PullRequest
Новая
       57

Линейный градиент CSS 50% влево и вправо Вверх и вниз по мобильному выпуску

0 голосов
/ 19 декабря 2018

Моим основным требованием было сделать 2 столбца с 50% красного (слева) и 50% белого (справа), в левом столбце есть тексты, а в правом столбце - изображение.Это прекрасно работает с моим решением на большом экране.Используя bootstrap 4, столбец Natural 2 будет перемещаться из стороны в сторону сверху и снизу вверх.Так как я делаю цвет фона с помощью «линейного градиента», я сделал быстрый медиа-запрос и сделал цвета сверху и снизу.

Проблема в том, что мне приходится постоянно связываться с / писать разные медиазапросы, и один размер экрана всегда ломается вот так enter image description here

Я написал несколько медиазапросови корректировки цвета% и максимальной высоты столбца изображения.Кажется, что я делаю что-то не так.Есть ли лучшее решение для начальной загрузки для этого?или лучший способ CSS, который работает на всех экранах? 

.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>



  <script type="text/javascript">

  </script>


</body>

</html>











<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Пожалуйста, следуйте этому: -

Здесь 48 - ваш верхний край, а 26 - нижний отступ левой области.Проверьте это с обновлением. 

var height = jQuery(".app-headline .text-content-left").height();	
	var actual_height = height + 48 + 26 + 'px';
	jQuery(".app-headline").css("background","linear-gradient(to bottom, #d4272e " + actual_height.toString() + ", #fff 50%)");
 .app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>

</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
	  
  </section>
0 голосов
/ 19 декабря 2018

Вам необходимо удалить приведенный ниже из медиазапроса, и вы можете попробовать псевдоэлемент для окраски, чтобы создать переполнение и скрыть белую часть: 

.app-headline .text-content-left {
     background: #d4272e;
}

Полный код: 

.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
  overflow:hidden;
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  } 
  .app-headline .text-content-left {
    position:relative;
    z-index:0;
  }
  .app-headline .text-content-left::before {
    content:"";
    position:absolute;
    top:0;
    left:-50vw;
    right:-50vw;
    bottom:0;
    z-index:-1;
    background: #d4272e;
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>



  <script type="text/javascript">

  </script>


</body>

</html>











<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->
...