不同设备上的卡响应出现问题

Question

我有一个小问题，我想问是否有人遇到过类似的问题并设法解决了它。问题是移动设备的响应能力，当我使用移动设备的分辨率时，文本和照片相互重叠。有人知道怎么解决吗？

.card_new {
background: var(--accent);
height: 100%;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.card_new_img {
object-fit: cover;
height: 270px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-10px {
bottom: 10px;
}

<script src="https://devilweb.pl/js/mdb.min.js"></script>
<link href="https://devilweb.pl/css/mdb.min.css" rel="stylesheet" />
<div class="container-xxl">
<div class="row">
<div class="col-12 col-xl-9">
<div class="row">
<div class="col-12 col-xl-6 py-3">
<div class="card_new position-relative">
<div class="row">
<div class="col-6 pr-0">
<img src="https://waskiel.pl/wp-content/uploads/2017/09/jak-zrobic-dobre-zdjecie-ustawienia-aparatu.jpg" class="w-100 card_new_img">
</div>
<div class="col-6 position-relative">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6">
</div>
<div class="col-3 text-right">
<span class="material-icons-outlined font-size-two-rem color-second-page">
favorite_border
</span>
<p class="color-second-page">
210
</p>
</div>
<div class="col-3">
<span class="material-icons-outlined font-size-two-rem color-second-page">
heart_broken
</span>
<p class="color-second-page">
007
</p>
</div>
</div>
</div>
<div class="col-12 text-center child">
<h3 class="font-weight-bold">
Photo&Art
</h3>
Agnieszka Malczak
</div>
<div class="col-12 position-absolute bottom-10px">
<center>
<button class="btn btn-primary rounded" type="submit">
Zobacz więcej
</button>
</center>
</div>
</div>
</div>
<img src="https://patrzszerzej.pl/wp-content/uploads/2020/01/IMG_0160cnet.jpg" class="card_new_img child" style="width:125px;height:125px;border-radius: 100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

下面的照片来自全高清分辨率：https://prnt.sc/XCqaaQpSTuWF这里一切都很好，但当分辨率降低时，会发生这样的情况：https://prnt.sc/AtI2k-uN56AP

所以，我的问题很无聊，有人至少有想法或者可以建议如何解决它吗？

Answer 1

这更多的是一个设计问题，但有一些选项。。。

使用媒体查询，您可以：用较小的尺寸隐藏照片，用尺寸隐藏bg横向，或者两者兼而有之。

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp