调整窗口大小时，使文本框比图像小

Question

我阅读了先前的一个问题，即如何使文本进入图像下方，但是它并不能按照我想要的方式工作。

我正在尝试在图像上方制作一个文本框。像这样

我在wordpress中使用wpbakery，这是CSS 而且我不知道写这样的css是否是个好主意。在平板电脑上，该框位于图像上；在平板电脑上，该文本将消失。

问题是当我调整窗口大小时，它恰好在图像上。 当窗口大小小于桌面大小时，如何使文本比图像小。

* {
  box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

.container {
  position: relative;
  font-family: Arial;
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: pink;
  color: white;
  float: bottom;
  padding-left: ;
  padding-right: 30%;
}

<div class="container">
  <img src="https://sijour.com/wp-content/uploads/2019/06/home-page.jpeg" alt="kids-clothes" style="width:50%;">

  <div class="text-block" style="margin-right:20%; margin-bottom:70px;">

    <p class="w3-margin" style="color: #9999;"> Kids clothes</p>
    <hr class="w3-margin">
    <h2 class="w3-margin"><b>Prens bebe</b></h2>
    <p class="w3-margin">Visit our Store online</p>
    <br>
    <div class="w3-button w3-round-large w3-pink w3-margin"> View more </div>
  </div>
</div>