CSS: в моб. версии текст вылезает за пределы блоков и колонок

Question

Такая проблема: создала колонки с ячейками, в веб версии всё хорошо, но при уменьшении размера окна браузера и в моб. версии при наведении на ячейку текст в некоторых из них вылезает за её пределы и за пределы колонки вообще (подключён Bootstrap, если это может играть роль):

В чем может быть причина?

        <div class="works">
      <div class="works_col">
        <div class="works_item">
          <img class="works_image" src="img/snail.jpg" alt="..." id="works_pic">
          <div class="works_info">
            <div class="works_title">Улитка</div>
            <div class="works_text">Всегда приходит внезапно</div>                
          </div>
        </div>
        <div class="works_item">
          <img class="works_image" src="img/cup.jpg" alt="..." id="works_pic">
          <div class="works_info">
            <div class="works_title">Хочу в Берлин</div>
            <div class="works_text">Пора выпить кофе и купить билет!</div>                
          </div>
        </div>
      </div>

CSS:

.works{
  display: flex;
}
.works_col{
  flex: 1 1 0;
  max-width: 100%;
  height: auto;
}
#works_pic{
  width: 100%;
}
.works_item{
  position: relative;
  background: linear-gradient(to bottom, #c43f8a, #606891);
  max-width: 100%;
  height: auto;
}
.works_item:hover .works_image{  /*hover - это та же штука но при наведении*/
  opacity: 0.2;
}
.works_item:hover .works_info{
  opacity: 1;
}
.works_image{
  transition: opacity 0.3s linear; /*transition - плавный переход, при наведении. opacity - прозрачн-ть. 1s - это 1 секунда, время за кот. происх-т переход. linear - линейный градиент*/
  max-width: 100%;
  height: auto;
}
.works_info{
  width: 100%;
  position: absolute;
  opacity: 0; /*видимость*/
  padding: 0 15px;
  text-align: center;
  color: white;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translate3d(0, -50%, 0);
  transition: opacity 0.6s linear;
}
.works_title{
  max-width: 100%;
  height: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  text-transform: uppercase; /*делает капслуком*/
  margin-bottom: 5px;
}
.works_text{
  max-width: 100%;
  height: auto;
  font-style: italic;
}

Заранее благодарю за ответ!

БЛОГ НА HUSL

CSS: в моб. версии текст вылезает за пределы блоков и колонок

Ответы (0 шт):