Размещение текста в контейнере при увеличении масштаба ⇐ CSS

[Anonymous]

Я пытаюсь создать адаптивный веб-сайт, все в порядке, за исключением текста внутри этого облака с надписью «эйуу!...», как вы видите на изображении ниже. Все в порядке, когда я не масштабирую изображение. Мне нравится такое поведение.




но когда я увеличиваю масштаб, у меня получается вот такое ужасное поведение




Я не знаю, как решить эту проблему, я пытался поставить весь блок изображения робота, говорящего облака и текста внутри элемента div и применяя позицию относительно к этому элементу div и абсолютную позицию ко всем элементам внутри него, кроме него не сработало, пожалуйста, какие-либо решения и заранее спасибо

это мой код:

Код: Выделить всё

  .header-box {
width: 100vw;
height: 90vh;
background-color: #33cccc;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
position: relative;
}

.main-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
width: 100vw;
text-align: right;
}

.main-nav__link {
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #ffffcc;
}

.text {
font-family: Roboto;
font-weight: bold;
font-size: 20px;
color: #ffffcc;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}

.name {
font-size: 1rem;
display: block;
animation-name: moveInLeft;
animation-duration: 2s;
}

.vector-1{
position:  relative;
height: 37vh;

}
.img-dialogue {
width: 60%;
position: absolute;
left: 20%;
bottom: 57%;
z-index: -1;
}

.dialogue {
font-family: Roboto;
color: #33cccc;
position: absolute;
top: 24px;
left: 55px;
display: inline-block;
}

.img-header {
width: 60%;
position: absolute;
bottom: 9px;
}

Код: Выделить всё

[list]
[*][url=#]About[/url]
[*][url=#]Projects[/url]
[*][url=#]Contact[/url]
[/list]

M.Amine Elwere Front-end
Web developer

[img]../vector/Png for the web/header minou.png[/img]
[img]../vector/Png for the web/png-dialogue-2.png[/img]
HEYY!...

Подробнее здесь: https://stackoverflow.com/questions/553 ... -i-zoom-in