Как получить текст отзыва для показа на мобильном телефоне в портретной ориентации? - PullRequest
0 голосов
/ 03 февраля 2020

Мы запускаем WordPress с темой Bridge. Он имеет встроенный виджет для скользящих отзывов. Он включен на нашей домашней странице. Он отлично работает на рабочем столе. На мобильном они появляются в альбомной ориентации, но исчезают в портретной. Visual Composer сгенерировал пользовательский CSS для этой части страницы. Я понимаю, что не могу редактировать это напрямую. Что мне нужно добавить / изменить, и где это дополнение / изменение должно быть размещено?

HTML Я не могу получить фактический HTML с нашей страницы, чтобы передать требование форматирования. Вот снимок экрана: Sirona Therapy Home Page HTML for Testimonials

**Additional CSS**(Not sure if helpful)
.title{
    height: 70px !important;
}

.entry-meta .tags-links {
    display: none;
}

.four_columns>.column1, .four_columns>.column2, .four_columns>.column3, .four_columns>.column4 {
    width: 33%;
}

@media only screen and (max-width: 800px){
.carousel .carousel-inner .slider_content_outer,  .slider_content_outer iframe {
    width:100%!important;
    height:230px!important;
    }}

@media only screen and (max-width: 600px){
.footer_top .column1,.footer_top .column2,.footer_top .column3,.footer_top .column4{
    width:100%!important;
    }
    .vc_custom_1454324358316 h2,.vc_custom_1454324358316 h3 {
        color: #000000!important;
    }
}
#contact-form{float: left;
width: 100%;
height: 5px;}

1 Ответ

0 голосов
/ 03 февраля 2020

Хорошо ... используется правило

@media (max-width: 767px) and (min-width: 320px){
 .vc_custom_1454330137581 { display: none;}
}

css, чтобы скрыть отзывы, если экран меньше 768 пикселей .... но вы можете перезаписать это ... используя ....

add_action('wp_footer', 'show_testimonials_on_mobile' );
function show_testimonials_on_mobile(){?>
  <style>
     @media (max-width: 767px) and (min-width: 320px){
       .vc_custom_1454330137581 { display: block!important;}
     }
  </style>
<?php}

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

Примечание: вместо vc_custom_1454330137581 вы можете добавьте уникальный идентификатор к короткому коду vc_row и используйте этот идентификатор ... для более перспективного решения ....

showing testimonias

...