スマートフォン機種別 画像の上にテキスト配置デザイン崩れ

こんにちは、
画像の上にテキストを配置しているのですが、スマホiphone12、mini、iphone12/13 PRO MAXでは表示がずれてしまいます。１つの画像で異なるディバイスでもデザイン崩れしないようにするにはどうしたらいいでしょうか？アドバイスいただければ幸いです。よろしくお願いします。

.arrow_box {
position: relative;
}
.top_left3 {
position: absolute;
top: 22%;
left: 10%;
width: 80%;
}

@media screen and (max-width: 590px)
.top_left3 {
top: 22%;
right: 2%;
width: 80%;
}

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ