Почему при уменьшении разрешения съезжает текст и кнопка, и в принципе меняется размер блока?

Question

[Даниил Иванов]

https://codepen.io/danilious/pen/MWVRGWX

Answer 1

[Олег Олегович]

У .preview_info ширина 50% и у "p" внутри .preview_info ширина 50%.

Answer 2

[Ренат]

У тебя указана ширина в процентах от размера окна. Замени CSS

.container{
	height: 500px;
	font-family: KTF;
}
.preview_info {
	width: 100%;
	display: flex;
	height: auto; /*зачем тут были проценты непонятно*/
  flex-direction:column;
}
.preview_info p {
	margin-top: 53px;
    width: 600px; /*ТУТ*/
    font-size: 23px;
}
.btn_sub{
	border: none;
    font-size: 15px;
    color: #FFF;
    letter-spacing: 2px;
    font-family: Leto;
    border-radius: 22px;
    padding: 30px;
    background-color: #bd8c95;
    width: 200px;  /*ТУТ*/
}
.btn_sub:hover{
	background-color: #B2848C;
	transition: 1s;
}

Answer 3

[denis_pesherin]

Если ты хочешь, чтобы блок занимал допустим половину от основного блока, то тебе надо что-то такое. Если ты хочешь изменять размер шрифта в зависимости от разрешения устройства забудь про указание в px любых размеров. А если надо, чтоб на мобилке было нормально видно нужен или бутстрап или медиазапросы писать)

.container{
	height: 500px;
	font-family: KTF;
}
.preview_info {
  position: relative;
	width: 50%;
	display: flex;
	height: 100%;
  flex-direction:column;
}
.preview_info p{ 
    position: relative;
	  margin-top: 53px;
    font-size: 1.2rem;
}
.btn_sub{
    position: relative;
	  border: none;
    font-size: 1.4em;
    color: #FFF;
    letter-spacing: 2px;
    font-family: Leto;
    border-radius: 22px;
    padding: 30px;
    background-color: #bd8c95;
}
.btn_sub:hover{
	background-color: #B2848C;
	transition: 1s;
}