Как зафиксировать объект, чтобы при добавлении изображений он не уплывал вверх?

Question

[dsendy]

Простите за глупый вопрос. Если я добавляю какие-либо картинки или отступы в текст, то название поста уплывает вверх

<div align='center' class='post_cont'>
                                <!-- Название,  которое улетает за пределы экрана -->
				<h3 class='pt-5'>Title</h3> 
				 <div class='text'>
				    <h5 class='display-5 mt-5'>
					    Content
				     </h5>
			          </div>
			</div>

https://codepen.io/dsender/pen/vYOmVdR

Comments

[Дмитрий]

Оформи на Codepen или хотя бы приложи стили. Как, по-твоему, люди должны понять, что там у тебя происходит?

[dsendy]

Дмитрий, Понял, сейчас оформлю

Answer 1

[Виталий Першин]

Не надо увеличивать больше реального размера... Увеличивайте из уменьшенного в реальное:

@keyframes post-get {
  0% {
    -webkit-transform: scale(.5);
            transform: scale(.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

Comments

[dsendy]

Жаль, но спасибо.

Answer 2

[DmitrijP]

там где раньше у вас scale был 1.5 поставил для примера 1.25 и всё зароботало.
вот изменения:

100% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
}
@keyframes post-get {
  0% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);

вывод: проблема в scale.