Текст перекрывается на мобильных устройствах и при увеличении ⇐ Html

[Anonymous]

Я создавал сайт о пицце и поместил текст на фоновое изображение. Проблема в том, что когда я уменьшаю масштаб или захожу на свой сайт с телефона, текст смещается и перекрывается.
На рабочем столе


Версия для телефона

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

.background-pizza {
position: relative;
display: inline-block;
}

.background-pizza,
#background-pizza {
width: 100%;
height: auto;
}

.order-title {
position: absolute;
font-size: 60px;
color: white;
text-align: center;
display: flex;
margin: 300px 100px 0 900px;
}

.order-paragraph {
position: absolute;
font-size: 40px;
color: white;
text-align: center;
display: flex;
margin: 500px 100px 0 900px;

}

.order-header {
position: absolute;
top: 70%;
left: 70%;
color: black;
background-color: greenyellow;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
border: 4px solid green;
}

.order-header:hover {
background-color: darkgreen;
}

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

The Pizza You've Been Waiting For🍕
Handcrafted pizzas, baked
to perfection - crispy on the
outside,
soft on the inside, and
topped with love in every slice.
[url=Pizzas.html]Order now[/url]
[img]images/Pizza background.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/798 ... hen-zoomed