0

We're running WordPress with Bridge theme. It has a built in widget for sliding testimonials. It is included on our home page. It works fine on desktop. On mobile they appear when in landscape orientation, but disappear when in portrait. Visual Composer has generated custom CSS for that part of the page. I understand I can't directly edit it. What would I need to add/change, and where should that addition/change be placed?

HTML I can't get the actual HTML from our page to pass the formatting requirement. Here's a screen capture: 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;}
Sirona Man
  • 13
  • 3
  • you could give it (main container) a unique id and then apply CSS with !important to overwrite generated applied CSS.... and if you could provide a live link that way we can analyze and give a proper solution... best – Sajjad Hossain Sagor Feb 03 '20 at 17:22
  • Hi Sajjad. Thanks for responding. I'm not a coder or developer. I'm a technically adept guy/former IT service tech. I can take instruction very well. I'm trying to save money and help my wife's private practice by dealing with work done by others, who are now impossible to contact. The URL is https://www.sironatherapies.com. The issue is on the home page, right after scrolling down from the video you'll see a testimonials slider. It's only problematic on the responsive mobile part, and only when in portrait mode. – Sirona Man Feb 03 '20 at 17:41

1 Answers1

0

Okay... it does uses

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

css rule to hide the testimonials if screen is less than 768px.... but you can overwrite this... using....

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}

but i am afraid you have to apply some responsive CSS rules as it is not made responsive for mobile....

Note : instead of vc_custom_1454330137581 you can add unique id to vc_row shortcode and use that id.. for more future proof solution....

showing testimonias

Sajjad Hossain Sagor
  • 518
  • 2
  • 16
  • I understand the CSS prevents testimonials from showing if under screen width threshold. Instead of adding the code you provided, couldn't I edit the existing code to change '.vc_custom_1454330137581 { display: none;}' to '.vc_custom_1454330137581 { display: block!important;}'? Please forgive my programming ignorance, but I don't understand adding unique ID to shortcode. My thoughts and hope is that there is some way to edit the responsive CSS to make the font smaller if screen width is in the portrait range. Is that possible? Which file handles responsive CSS? There are so many files! – Sirona Man Feb 03 '20 at 20:05
  • If you edit existing code your edits would be overwritten on the next plugin/theme update. That's why we add our own CSS instead. – hostingutilities.com Feb 16 '22 at 00:50