Css Wordpress：移动设备上的文本消失

我希望外面有人能帮忙

我正在处理此页面：。当你在iPhone上查看页面时，前两名的标题就会消失在图片后面

我对Wordpress和CSS非常熟练，不知道我能做些什么来解决这个问题

有什么想法吗？

需要使用媒体查询。 并且必须阅读媒体查询

请使用此媒体查询css。并让我知道任何进一步的澄清

@media screen and (max-width: 1199px) {
  .department-head-div.executive-div .figure-image, .department-head-div.executive-div .figure-image img{
    width: 100%;
    height: 100%;
  }
  .department .row > div > div{padding-left: 10px;}
}
@media screen and (max-width: 767px) {
  .department .row > div > div{
    height: auto;
    padding-left: 10px;
    width: 100%;
    display: inline-block;
  }
  .department .row > div > div{text-align: center;}
}

---

问题的根源在于图像的宽度和高度设置为

250px

，因此无论容器大小如何，图像都会溢出，从而切断文本。如果您更改：

.department-head-div.executive-div .figure-image,
.department-head-div.executive-div .figure-image img {
    width: 250px;
    height: 250px;
}

指的是：

.department-head-div.executive-div .figure-image,
.department-head-div.executive-div .figure-image img {
    width: 100%;
    max-width: 250px;
    height: auto;
}

---

该问题应自行解决，因为图像的最大宽度为250px，但受父容器宽度的限制。

将此代码用于以下输出

@media only screen and (max-width: 767px) {
    .department-head-div.executive-div .row > div {
        width: 100%;
    }
    .department .row > div > div {
        width: 100%;
        float: left;
        height: auto;
        display: block;
        overflow: hidden;
        text-align: center;
    }
    .department-head-div.executive-div .figure-image, .department-head-div.executive-div .figure-image img {
        height: auto;
        margin: 0 auto;
        float: none;
    }
}