WordPress：文字在移动设备上消失

Question

我希望外面有人可以提供帮助。

我正在此页面上：http://www.jackjaffa.com/directory/。在iPhone上查看页面后，排名前2位的人的标题就会消失在图片的后面。

我非常精通Wordpress和CSS，无法弄清楚该如何解决。

有什么想法吗？

Answer 1

需要使用媒体查询。 并且必须阅读有关媒体查询https://www.w3schools.com/css/css3_mediaqueries.asp

的信息

请使用此媒体查询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;}
}

Answer 2

问题的根源是图像的宽度和高度设置为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，但受父容器的宽度限制。

Answer 3

将此代码用于以下输出。

@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;
    }
}