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