What is the best way to display testimonials text on mobile devices when in portrait orientation?

We have a WordPress site with the Bridge theme installed. The home page features a widget for sliding testimonials, which works perfectly on desktop but has some issues on mobile. When viewed in landscape orientation, the testimonials appear fine, but they disappear when in portrait mode. Visual Composer has generated custom CSS for this section of the page, and I am aware that direct editing is not possible. What modifications should be made and where should they be placed?

HTML: I am unable to provide the actual HTML code due to formatting restrictions. However, here is a screenshot for reference: https://i.sstatic.net/NDEfb.png

**Additional CSS (May be 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;
    }
}

Answer №1

Alright... it utilizes

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

a CSS rule to hide the testimonials on screens smaller than 768px.... however, you can override this behavior by 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 please note that some responsive CSS rules need to be applied as it is not originally designed for mobile responsiveness....

Note : instead of vc_custom_1454330137581, consider adding a unique id to the vc_row shortcode and use that id for a more future-proof solution....

https://i.sstatic.net/8yQcf.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

Generate headers for tables that are created dynamically in HTML

I need to develop a table where some of its columns are generated dynamically based on database values. So far, everything seems to be going smoothly. However, I am facing an issue with the dynamic table headers. I want to create two sub-headers for each ...

Impact of designs on the elements within components

Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...

What is the best way to adjust the background-position of an image when using slideToggle()?

I have successfully implemented the code to open/close a div when clicking a specific button. Now, I am looking to enhance this functionality by changing the appearance of the button from a down arrow to an up arrow when toggling the div. This is my first ...

Is your div not loading correctly due to JQuery or Javascript?

PHP Version 7.0 JQuery Version 3.1.0 It is noticeable that the content above gets copied and pasted every five seconds instead of refreshing. The aim is to refresh the include every five seconds. Website: Code: <!doctype html> <html><h ...

Struggling to activate the upload dialog feature

Currently in the process of developing a straightforward website, and I've come across this issue: <form action="upload.php" method="post"> <input type="file" name="image" accept="image/*"> <input type="submit"> </form> Altho ...

Error: The Ionic and WordPress integration encountered an issue because the property 'length' is undefined

I am trying to establish a connection between Ionic and WordPress API with Angular. However, I am encountering the following error: TypeError: Cannot read property 'length' of undefined at WpProvider.webpackJsonp.211.WpProvider.getUserImage (ht ...

Detecting media queries for the Samsung Galaxy S3 and S4 devices

I have been working on implementing media queries to show text boxes with different styles for iPhone 5, iPhone 6, Samsung Galaxy SIII, and Samsung Galaxy S4. Initially, everything was working fine for iPhone 5 and iPhone 6, but when I switched from an i ...

exploring div element(s) with jQuery

My HTML page contains multiple div elements in the body. I have also included buttons with associated click functions in jQuery to change the background-color of a div element based on the button pressed. However, I'm facing an issue at the 'term ...

Arrangement within a div container featuring a dynamic height element on the left side

I'm working on a div with a set width of 950px; Inside this div, there are two other divs - one floating left and the other floating right. The left div contains text while the right div contains an image with text beside it. The height of the image ...

Tips for making a central CSS gradient

I am looking to create a background gradient similar to the one shown in the image (Load more news) and also add a border style. Any suggestions on how to achieve this would be greatly appreciated. ...

Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

How can I prevent the text on a Bootstrap 5 button with horizontally and vertically centered text, along with a right aligned icon, from overlapping when it wraps? Additionally, how do I ensure that the icon stays vertically centered when the button text w ...

Splitting HTML content into nodes using PHP XPath (including empty nodes)

I am currently attempting to separate the HTML string into individual nodes, along with their text content if applicable. Here is the HTML string that I am working with: <p>Paragraph one.</p> <p><strong>Paragraph <em>two</ ...

Looking to create a pop-up using javascript, css, or jQuery?

When visiting digg.com and clicking the login button, a sleek in-screen popup appears to input user data. I'm curious about the best way to achieve this on my own site. It is built with RoR and includes some Javascript elements. Searching for "javasc ...

JavaScript - Relocating the DIV Scrollbar to the Top Upon iFrame SRC Modification

re: I have created a user-friendly website for comparing different potential "expat" cities. Each city has links (target=iframe) for cost of living data, Wikipedia, expat blogs, climate information, and Google Maps. In the left column, there are control ...

Child div within a parent div with absolute positioning does not extend to the full height of the webpage

I am currently facing an issue with a bug in my project that I am working on. The mobile menu is not taking the full height of the viewport when the screen size is less than 768px, even though it has been set to 100%. It only becomes visible when toggled ...

HTML set hover & active states to remain active indefinitely

NOTE: My project utilizes Angular, so Angular may offer a solution to this issue as well I am in the process of creating a page where I can preview and test out various styles that I have designed. In order to achieve this, I need to somehow activate both ...

Regular expressions can be used to extract specific attributes and inner content from a div element within a contentEditable container

Context I am currently developing a tagging system called @Name for my website. Successfully, I have managed to detect names upon keystroke and replace the content with the corresponding div class='tag' data-id='User-id'>Name</di ...

Caution: The Wordpress function call_user_func_array() requires the first parameter to be a legitimate callback, with an array having precisely two elements

I'm currently working on implementing a custom function to add the Access-Control-Allow-Origin Header since I don't have access to the server's .conf files. Here is the code I've written: add_filter( 'wp_headers', array( &ap ...

Can you determine the width of a child element in HTML based on the width of its parent element?

i am dealing with HTML and CSS files <div> <p class="ellipsis"> Some text that is generated randomly</p> </div> The CSS code in the LESS file is as follows: .ellipsis {    white-space: nowrap;    overflow: hidden; ...