Изменение размера CSS Grid Box странно в каком-то разрешении - PullRequest
Новая
       44

Изменение размера CSS Grid Box странно в каком-то разрешении

0 голосов
/ 27 сентября 2019

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

Я уже пытался расположить его влево или вправо, но он все еще сдвигается и обрезает прямоугольник, как вы можете видеть в этомкартинка:

Сайт

HTML-код: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>News</title>
</head>

<body>    
    <div class="border1 border2">
        <div class="background text-center text-white overflow-hidden" *ngFor="let post of posts | async" >
            <div class="my-3 py-3" >
                <h1>{{ post.title }}</h1>
                <p class="lead">{{ post.info }}</p>
                <p class="lead">Author:</p>
                <p class="lead">{{ post.author }}</p>
            </div>
            <div class="bg-light box-shadow mx-auto whitebox" >               
                <a class="btn btn-outline-secondary buttonn" href="/news">Read More</a>
            </div>
        </div>
    </div>
    <hr>
</body>
</html>

Код CSS: этот код выглядит ужасно, потому что я продолжаю экспериментировать с ним 

h1, h2, h3{
    padding-left:0%;
    text-align: center;
    font-size:140%;
    line-height: 1;
    margin:0;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
  }

  p{
    padding-left:20%;
    margin:0;
    white-space: nowrap;
    width:80%;
    overflow:hidden;
    text-overflow: ellipsis;
  }

  #body{
    position: relative;

  }

  .background{
    background-color: #49C6E5;
    border-radius: 10px;
  }
  .border1{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    padding: 10px;
    align-items: center;
    object-fit: cover;
    grid-gap: 10px;
    width: 100vw;
    height: auto;
    position: relative;
    right:28%;
    bottom: 150px;
  }

  .whitebox {
    position:relative;
    bottom:-10px;
    padding:10px;
    width: 80%; 
    height: 200px; 
    border-radius: 21px;
  }
  .buttonn{
      position: relative;
      bottom:-40%;
      border: 2px solid rgba(17, 144, 194, 0.85)
  }
  .buttonn:hover {
      background-color: rgba(17, 144, 194, 0.85);
      color: white;
  }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

@media (max-width:700px) {
    .border2 {
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, 3fr));
      align-items: center;
      object-fit: cover;
      grid-gap: 20px;
      width: 100vw;
      height: auto;
      position: relative;
      right: 7%;
      bottom: 10px;
      }
  }

  .overflow-hidden { overflow: hidden; }

Он должен просто изменить размер окна, а не вырезать текст внутри.

...