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

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

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

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

wordpress html css testimonials
person Sirona Man    schedule 03.02.2020    source источник
comment
вы можете дать ему (основному контейнеру) уникальный идентификатор, а затем применить CSS с !important, чтобы перезаписать сгенерированный примененный CSS.... и если бы вы могли предоставить живую ссылку таким образом, мы можем проанализировать и дать правильное решение... лучше всего   -  person Sajjad Hossain Sagor    schedule 03.02.2020
comment
Привет Саджад. Спасибо за ответ. Я не кодер и не разработчик. Я технически подкованный парень/бывший ИТ-специалист. Я могу принимать инструкции очень хорошо. Я пытаюсь сэкономить деньги и помочь частной практике моей жены, занимаясь работой других, с которыми сейчас невозможно связаться. URL-адрес: sironatherapies.com. Проблема находится на главной странице, сразу после прокрутки видео вы увидите ползунок с отзывами. Проблема только в отзывчивой мобильной части и только в портретном режиме.   -  person Sirona Man    schedule 03.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо... он использует

@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 и использовать этот идентификатор.. для более надежного решения в будущем....

показ отзывов

person Sajjad Hossain Sagor    schedule 03.02.2020
comment
Насколько я понимаю, CSS не позволяет показывать отзывы, если они меньше порога ширины экрана. Вместо добавления предоставленного вами кода, нельзя ли отредактировать существующий код, заменив '.vc_custom_1454330137581 {display: none;}' на '.vc_custom_1454330137581 {display: block!important;}'? Пожалуйста, простите мое невежество в программировании, но я не понимаю добавление уникального идентификатора в шорткод. Я думаю и надеюсь, что есть какой-то способ отредактировать отзывчивый CSS, чтобы уменьшить шрифт, если ширина экрана находится в портретном диапазоне. Это возможно? Какой файл обрабатывает адаптивный CSS? Там так много файлов! - person Sirona Man; 03.02.2020