Изменение размера div в bootstrap, но оно не работает как надо?

Question

[HacerPC]

Добрый день. Приветствую на данном вопросе. Вопрос максимально просто и сложен одновременно. У на дано некий div, в котором есть другие div. Это построенное за таким образом:

<div class="container-fluid">
      <div class="row">
          <div class="col-md-6">
              <div class="col-12">
                  <div class="img-fluid" alt="Image"></div>
              </div>
          </div>
          <div class="col-md-6">
              <div class="col-12">
                  <div class="card border-0 shadow-sm p-3 mb-5 bg-white rounded" style="width: 25rem;">
                      <div class="card-body">
                          <h5 class="card-title">****************************</h5>
                          <p class="card-text">*****************************************************</p>
                          <p class="card-text">+************</p>
                          <a href="" class="btn btn-dark">*******</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

В нашем случае, при нормальных условиях(то есть полноэкранный режимом для компьютера), div работает как надо на весь размер, не превышает ширину устройства. Но при изменении его в телефонный режим, происходит баг, который я прошу помочь исправить. Размер div-а начинает превышать нужный, но при этом он остается как надо(то есть все что должно быть видно - видно), но если уменьшить размер, появляется не нужные части.

П/с забыл CSS приписать:

.container-fluid .row {
  margin-left: -5%;
}

.img-fluid {
  padding-left: 50%; /* Отступы в процентах */
  max-width: 200%; /* Максимальная ширина 100% */
  max-height: auto; /* Максимальная высота автоматически */
  left: 0;
  width: 200%;
  height: 600px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: right;
  padding-right: 20px;
  color: white;
  overflow: hidden;
  background: linear-gradient(
      to left,
      rgba(255, 255, 255, 1),
      transparent
    ),
    url('file:///C:/Users/user/Downloads/9e4ae833-3dd3-4742-b4bd-46f248595726.jpg');
  background-size: 57% auto;
  
  background-position: -100px center;
  background-repeat: no-repeat;
  transition: all 0.3s; /* Add smooth transition */
}

  .col-5 h3 {
    font-size: 2em; /* Измените размер шрифта на 2 em */
    
  }

  @media (max-width: 760px) {
      .col-md-6 {
      max-width: 100%;
      order: 2; /* Change the order to display the card below the image */
      margin-top: 20px; /* Add some space between the image and card */
      margin-left: 0px;
      }
  }


.col-5::before {
  content: "";
  padding-left: -5%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 255, 255, 1) 95%
  );
  z-index: -1;
}

.col-5 h3 {
  top: 30px;
  margin: 0;
  color: rgb(0, 0, 0);
  text-align: right;
  position: absolute;
  top: 50%;
  right: 20%;
  transform: translateY(-50%);
  text-align: right;
  padding-left: 50%;
  margin-bottom: 10%;
}

.col-5 h4 {
  margin-top: 10px;
  color: rgb(0, 0, 0);
  text-align: right;
  position: absolute;
  top: 75%;
  right: 20%;
  transform: translateY(-50%);
  text-align: right;
  padding-left: 50%;
}

.col-md-6 .col-12 .card{
  margin-left: 10%;
  margin-top: 10%;
}


.flex2,
.flex3,
.flex4 {
  margin-top: 5%; /* Регулируйте значение, чтобы настроить отступы по вашему усмотрению */
}

.png{
  margin-right: 2%;
}

Comments

[Сергей delphinpro]

Размер div-а начинает превышать нужный, но при этом он остается как надо(то есть все что должно быть видно - видно), но если уменьшить размер, появляется не нужные части.

Вот эту часть было бы неплохо переформулировать на нормальном языке. Нифига же непонятно.
Ну или картинку приложить с описанием "неправильного" поведения.

ЗЫ
col в col непосредствено не вкладывают. всегда должно быть .row > .col

Answer 1

[Алексей Голягин]

Чет прям какой то трэш с html и css )))

.container-fluid .row {
  margin-left: -5%;
}

.img-fluid {
  padding-left: 50%; /* Отступы в процентах */
  max-width: 200%; /* Максимальная ширина 100% */
  max-height: auto; /* Максимальная высота автоматически */
  left: 0;
  width: 200%;
  height: 600px; ...

- это вас кто так научил?)))

<div class="col-md-6">
              <div class="col-12">
                  <div class="img-fluid" alt="Image"></div>
              </div>
          </div>

- col в col обычно не вкладывают (надо .row > .col)
В общем либо у вас учителя прям печальные, либо верстка это не ваше)