Невозможно скрыть переполнение SVG-графики в мобильном дизайне с максимальной шириной 375 пикселей - PullRequest
Новая
       29

Невозможно скрыть переполнение SVG-графики в мобильном дизайне с максимальной шириной 375 пикселей

0 голосов
/ 12 мая 2019

HTML CSS - я не могу на всю жизнь понять, что мой фоновый рисунок: линейный градиент получает «обрез» при максимальной ширине 375 пикселей.

Я в основном простоХобби, работающий над некоторыми проблемами, чтобы попытаться узнать больше.

Я пробовал переполнение: скрытый, переполнение-x: скрытый, и играл с отступами полей и т. д. и т. д. Я искал CSS Tricks w3schools.com stackoverflow.com. 

    <body>

        <div class="wrapper">


            <div id="gradient-pink">pinkGradient</div>


        </div>
    </body>

и CSS 

    body {
        width: 375px;
        height: 100vh;
        background-image: linear-gradient(to right, #f7f7f7, #fbfdff);
        overflow: hidden;
        z-index: -3;
        line-height: 1.7;
        margin: 0;
        color: $primary-color;
    }

Codepen

Результатом является веб-страница, показывающая все.

1 Ответ

0 голосов
/ 13 мая 2019 

html {
  background-size: cover;
  height: 100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  width: 100vw;
}

body {
  background-image: linear-gradient(to bottom, #f7f7f7, #fbfdff);
  z-index: -3;
  line-height: 1.7;
  margin: 0;
  color: $primary-color;
}

h2 {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 1.2rem;
}

.subscribe p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  padding: 15px;
}

#gradient-pink {
  position: absolute;
  z-index: -1;
  border-radius: 30px;
  top: -160px;
  right: -240px;
  width: 400px;
  height: 400px;
  background: -webkit-gradient(linear, left top, right top, from(#2336b6), to(rgba(31, 38, 103, 0.9)));
  background-image: linear-gradient(to right, #ff52bf, #9a52ff);
  -webkit-transform: rotate(-45deg);
  transform: rotate(55deg);
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out
}


/*

.white-bg-box-deg {
    position: absolute;
    z-index: -2;
    border-radius: 20px;
    border: 1px solid #CCC;
  top: 300px;
  left: -150px;
    width: 500px;
    height: 500px;
    background-image: linear-gradient(to right,  #7f8d98, #f6f9fd);
    transform: rotate(20deg);
    -webkit-transform: rotate(-40deg);
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
}

*/

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  width: 110px;
  margin: 20px 0 0 20px;
}

.btn-one {
  font-family: 'Open Sans', sans-serif;
  background-color: #f6f9fd;
  border: none;
  padding: 5px 30px;
  margin: 20px 20px 10px 0;
}

.btn-one a {
  text-decoration: none;
}

.btn-two {
  font-family: 'Open Sans', sans-serif;
  background-color: $my-pink;
  border: none;
  color: #f6f9fd;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  padding: 10px 35px;
  box-shadow: 2px 2px 3px 3px hsl(322, 100%, 66%);
  text-decoration: none;
}

.btn-two a {
  text-decoration: none;
}

.btn-three {
  font-family: 'Open Sans', sans-serif;
  background-color: $my-pink;
  border: none;
  color: #f6f9fd;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  padding: 10px 35px;
  text-decoration: none;
}

.btn-three a {
  text-decoration: none;
}

.body-img-1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.body-img-1 img {
  margin: 80px 0 0 0;
  width: 300px;
}
`
<div id="gradient-pink">pinkGradient</div>
<header>
  <div class="logo"><img src="https://www.aaronlefler.com/testing/images/logo.svg" alt=""></div>
  <button class="btn-one"><a href="#">Try It Free</a></button>
</header>`
...