Strange behavior from QODE banner on Wordpress site

We recently acquired a Wordpress website that utilizes the Bridge theme, with the QODE slider as the banner plugin.

However, we encountered an issue where the banner is not displaying on desktops; it only appears in the mobile layout. Initially visible when the page loads, the banner mysteriously disappears once the loading process completes. While we were able to implement a temporary fix using CSS workarounds, we believe there must be a more appropriate solution embedded within the plugin or theme settings that we are unable to locate.

Additionally, it seems that a JavaScript file is applying a negative 1100px margin to the content... Here's the CSS hack we resorted to:

@media screen and (min-width: 900px) {
    .header_bottom .container_inner {
        position: fixed !important;
        width: 100% !important;
        background-color: white !important;
        margin-top: -20px !important;
    }

    .container{
        position: relative !important;
    }

    .content{
        margin-top: 0 !important;
    }

    .q_slider_inner{
        padding-top: 20px !important;
    }

    .title_size_small{
        height: 0px !important;
    }


    .header_bottom .container_inner{
        margin-left: -45px !important;
    }

    .content .container .container_inner.page_container_inner{
        padding: 200px 0 0 0 !important;
    }
} 

Upon initial page load: https://i.sstatic.net/hZY1t.png

After page fully loads: https://i.sstatic.net/noesP.png

Post CSS workaround implementation: https://i.sstatic.net/dguw3.png

If anyone has experience troubleshooting issues with the Bridge theme or the QODE plugin in Wordpress, we welcome your knowledge and insights on how to effectively identify and resolve such problems.

Answer №1

When it comes to developing WordPress websites for our clients, we primarily use the Bridge theme. However, we recently encountered an issue with the latest version of Bridge and the Chrome 55 update. It appears that this could be the issue you are currently facing as well. Fortunately, there is a new update available for Bridge that resolves this issue. If you don't want to wait for the update, you can implement a CSS hack as a temporary solution. For more information on this issue, visit

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

Issue with Bootstrap Modal failing to display the dialog box

I have been attempting to incorporate a Bootstrap Modal for quite some time now. Despite following the guidelines in the bootstrap documentation, I am still unable to get it to work properly. Any ideas why this jsfiddle link is not functioning as expected? ...

Sort columns using drag and drop feature in jQuery and AngularJS

Utilizing the drag and drop feature of jquery dragtable.js is causing compatibility issues with AngularJs, hindering table sorting functionality. The goal is to enable column sorting by clicking on the th label and allow for column rearrangement. Currentl ...

Several problems with CSS regarding DIV height set to 100% and the content inside

I'm facing a bit of a puzzle here. I have a div that spans the full height of the browser, with a background set to 100% size and image content contained in two inline divs that are vertically aligned in the middle. In one of these divs, the image is ...

Export a specifically designed object from a module using Python

When working with node.js in JavaScript, you can set module.exports = 13; in a file called module.js, and then import it elsewhere using x = require("module.js");. This will directly assign the value of 13 to variable x. This method is useful when a modul ...

Next.js presents a challenge with micro frontend routing

In the process of developing a micro frontend framework, I have three Next.js projects - app1, app2, and base. The role of app1 and app2 is as remote applications while base serves as the host application. Configuration for app1 in next.config.js: const ...

"Problems with the YouTube API functions: playVideo, pauseVideo, and stopVideo not

Currently, I am working on integrating the YouTube API to control a group of players within a slideshow. My goal is to pause and play videos based on which slide the slideshow is on. I have tried storing the players in an array using the frame's id. W ...

How do I prevent a media query written for small screens from also affecting large screens?

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){ CSS properties for various screen widths are defined here } ...

Using a physical Android device to test and run a Meteor mobile application

I'm struggling to get my Meteor app to run on my Android device (LG G2). Despite searching online for a solution, I haven't come across any similar issues. I followed the instructions carefully, added the Android platform to my project, and ran i ...

Display outcome generated by JavaScript in the input box

I've successfully implemented a date/time picker in a form. Using JavaScript, I've created a script to calculate the difference between two date fields and display it in a third field labeled Course Duration. However, I'm encountering an i ...

Using alternative components in nextjs routes

Exploring how to set up 3 components within Next.js to achieve the desired snippet: <Route path="/" component={homePage} /> <Route path="/about" component={aboutPage} /> <Route path="/faq" component={faqPage} /& ...

Center float elements with a percentage width

I am attempting to design a layout in which two elements float alongside each other, starting from the center. I have been successful in achieving this, but only when the width of the two floating elements is fixed. Want to take a look? Follow this link: ...

Using an external script to modify or call a Vue.js method

My Vue app is constructed using Webpack and includes a few basic computed properties, such as calculating the sum amount from input values. However, I now require the capability to replace the summation function with one stored in a separate file that is n ...

What's the best way to alter the style of an element within a <div /> using JavaScript?

Looking at my index.html, I see the following code: <div id="mydiv"> Text inside div <h1> Header inside div </h1> </div> <h1> Header outside div </h1> My style.css file is defined like this: #mydi ...

The importance of .hash in this jquery function explained

I utilized a jQuery function from someone else and tweaked it to fit my needs, however, I am struggling to grasp how it actually operates. Specifically, the line var content = this.hash.replace('/', ''); Can anyone offer an explanation ...

Apply the active class to the initial element within the dynamically generated tabs

Using jQuery, I have created these dynamic tabs. My approach involves selecting the first element, nav + tab content. HTML <div class="col-lg-12"> <div class="tabs-container"> <ul class="nav nav-tabs sys ...

How can the string '0' be transformed into the number 0 using JavaScript?

My current challenge involves error handling for 2 input values, where I am using regex to ensure that the input is always a number. The issue arises when I want to avoid triggering error handling if the user enters '0'. Currently, I am using the ...

Run the JavaScript configuration (Object) prior to converting it to JSON format

Is there a way to implement functions within a JavaScript file (configuration for backend server) that execute before parsing the data to JSON? For example: config.js module.exports = { structure_layout: { BUILDING: "BUILDING", FLOOR: ...

I am seeking a way to transform this request call from JavaScript into Ajax code

My JavaScript code includes a request function, but I believe it's outdated and I'd like to convert it into an AJAX call. Can someone assist with this update? Here is the current function in my JavaScript file: function loadRest() { const ...

Can a Material UI Select element be made unresponsive to hover effects?

When a user hovers over an element, I want to achieve the following functionality: document.getElementById("dropdownCategory").disabled = true; <Tooltip arrow placement="right" title={props.description} > <FormControl id="dro ...

The button fails to initiate an event

I'm stuck on this code and I can't figure out what's missing. When I click the Compute button, it's supposed to trigger the function computeAll(). However, nothing happens when I try to interact with the script: Here is the HTML code: ...