Почему мой мобильный телефон не реагирует?

Question

Мне нужна помощь с областью всплывающих подсказок, которая полностью покрывает текст на мобильном телефоне, но на настольной версии. Любая идея, что я могу сделать, чтобы решить это? Это элемент парения под картиной основателя. https://www.webleviathan.com/#team

Большое спасибо заранее, peeople. Tony

Answer 1

Tony, Таким образом, ваш класс для этого div .details Ваше текущее css для этого класса

.team-member:hover .details, .team-member:focus .details {
    top: 0;
    opacity: 1;
    color: white;
    background: #333;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
.team-member .details {
    position: absolute;
    top: -200px;
    left: 0;
    width: 100%;
    height: 190px;
    padding: 15px;
    opacity: 0;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    -webkit-transition: all 500ms;
    transition: all 500ms;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

и я это вижу. Ваша CMS использует начальную загрузку и поэтому, когда я изменяю свой видовой экран на более мобильный размер ... я получаю это

Это потому, что bootstrap - это не Device Responsive Design framework , а скорее очень старая концепция для мобильных устройств.

Немного покопавшись в вашей CMS и теме я вижу WordPress 4.9.8 с запущенной темой Zerif-Lite

Я большой поклонник WP и Zerif-lite была потрясающая тема Времена меняются ... тема, которую вы используете, действительно не подходит для wp 4.9.8 по причинам, которые вы видите. У них есть новая тема, которая заменяет ту, которая не работает с новым WP. https://themeisle.com/themes/zelle-lite/

Поскольку WP вносит изменения, разработчики должны идти в ногу с изменениями, и иногда старое и рабочее становится несуществующим и проблемным - некоторые не из-за работы разработчиков темы, а из-за изменения платформы.

Bootstrap был тем, на чем он основывался. Bootstrap был проектом твиттера в * Bootstrap v3.1.1 (http://getbootstrap.com)

• Авторские права 2011-2014 Twitter, Inc.

• Лицензировано под MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

Bootstrap теперь находится в другой команде, и "обертывание" начальной загрузки в качестве вашего пользовательского интерфейса в теме считается вчерашней технологией.

Можете ли вы сделать так, чтобы тема Zerif-lite делала то, что вы ищете, с начальной загрузкой? АБСОЛЮТНО! Вам понадобится полное обучение CSS3 или очень опытный веб-разработчик.

Если вы программист, вы можете найти ответ, используя media querys для настройки этой темы, но я не рекомендую такой подход, я рекомендую обновить вашу тему.

Answer 2

.team-member:hover .details {
  font-size: 16px;
} 

является причиной, добавьте этот селектор в свой мультимедийный перерыв для мобильных устройств.

используйте em или vh вместо px.