Problem with card responsiveness on different devices-CodePudding

I have a little problem and I wanted to ask if anyone had encountered a similar problem and managed to solve it. The problem is the responsiveness on mobile devices, when I use the resolution of the mobile device, the text and the photo are overlapping each other. Anyone have an idea how to solve it?

.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 >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <div >
                <img src="https://waskiel.pl/wp-content/uploads/2017/09/jak-zrobic-dobre-zdjecie-ustawienia-aparatu.jpg" >
              </div>
              <div >
                <div >
                  <div >
                    <div >
                      <div >
                      </div>
                      <div >
                        <span >
                            favorite_border
                        </span>
                        <p >
                          210
                        </p>
                      </div>
                      <div >
                        <span >
                            heart_broken
                        </span>
                        <p >
                          007
                        </p>
                      </div>
                    </div>
                  </div>
                  <div >
                    <h3 >
                      Photo&Art
                    </h3>
                    Agnieszka Malczak
                  </div>
                  <div >
                    <center>
                      <button  type="submit">
                          Zobacz więcej
                      </button>
                    </center>
                  </div>
                </div>
              </div>
              <img src="https://patrzszerzej.pl/wp-content/uploads/2020/01/IMG_0160cnet.jpg"  style="width:125px;height:125px;border-radius: 100%;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The photo below is from Full HD resolution: https://prnt.sc/XCqaaQpSTuWF Everything is fine here, but when the resolution is reduced, something like this happens: https://prnt.sc/AtI2k-uN56AP

So, my question is boring, does anyone have an idea at least or can suggest how to solve it?

CodePudding user response：

This is more of a design question but some options...

using a media query, you could: hide the photo on a smaller size, hide the bg landscape on size or both.

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

CodePudding user response：

I can't deal with the fact that the text is hiding under the photo. Which is why it is not readable. I searched on various forms but did not find it another way / solution, how to center the text to make it more fit to the card. I mean more specifically the text: Photo & Art.