Footer div is being covered by the page

I am currently working on a website built with "WordPress", and I have implemented a mobile footer plugin that is designed to only appear on mobile devices. However, I am encountering an issue where the page content overlaps the footer on phones.

I attempted to use z-index in my CSS code to ensure that the footer div appears on top of the page content rather than behind it, but unfortunately, this approach did not seem to resolve the problem. Here is the snippet of my CSS code for the mobile footer div:

#callbook {
    bottom: 0;
    height: 48px;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 100;
    -webkit-box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
    -moz-box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
    box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
}

In an attempt to troubleshoot the issue, I added padding-bottom:48px; to the code to check if the div was present, which confirmed its existence. However, the main problem persists as the page continues to overlap the footer div. Any assistance you can provide would be greatly appreciated!

Thank you in advance!

javascriptjqueryhtmlcsswordpress

Answer №1

Upon reviewing the website, it appears that the z-index was not set high enough. Adjust the z-index of #callbook to z-index: 9999; and it will display correctly.

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

Is there a way to identify the element causing an error in promise.map and then either log it to the console or skip it using code?

When running the code provided below, I encounter a 500 error for certain URLs in my list due to the structure of the page. The error occurs specifically on the line .map((htmlOnePage, index) => when some URLs lead to invalid pages, causing the prog ...

javascriptnode.jsweb-scrapingcheerio

To view the element when the browser is not in full screen mode, the body overflow (both horizontally and vertically) can be used instead of resizing

I am trying to figure out how to create two vertical divs that stay the same size and height when the browser is not on full screen. I want users to be able to use the body's overflow scroll function to read both DIV elements along the x and y-axis. ...

htmlcsscss-shapes

Angular mobile navbar experiencing collapse issue

I am working on an Angular project that does not include Jquery. I am trying to implement a navbar using mdbootstrap, but I am encountering issues with the collapse feature not working properly. Below is the HTML content I am using: <header> < ...

htmlangularmdbootstrap

Encountering a 400 bad request error when attempting to utilize AJAX within a WordPress environment

I am encountering a 400 error while attempting to retrieve the response from WordPress AJAX. Despite multiple attempts, I have been unable to pinpoint the root cause of the issue. The jQuery version being used is 3.6 and the filter.js file appears to be fu ...

javascriptphpjqueryajaxwordpress

How can Node.js and Socket.io be used with either PHP or jQuery to search within a text file?

I currently have a setup where I am using node and socket io to transmit a dynamic time format (HH:MM:SS) to my apache-served index.php file. I have successfully implemented the functionality to display the time in the PHP file. Now, my goal is to dynamic ...

phpjquerynode.jssockets

Steps to improve the appearance of the Header on a dataTable during Dragging

I am working on creating a table that can be reordered using mat-table and MatTableDataSource. However, I would like the column to have a white background color instead of being transparent when dragged. Is there a way to achieve this? <table mat-tab ...

javascriptangularangular-materialmaterial-uiangular-datatables

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

Analyzing the DOM content loading time for web pages generated using AJAX technology

When analyzing website performance, I rely on window.performance.timing. However, this method falls short when it comes to measuring the performance of webpages loaded through ajax calls. For instance, websites built with frameworks like angularjs often lo ...

javascriptajax

There appears to be an issue with the compilation of the TypeScript "import { myVar }" syntax in a Node/CommonJS/ES5 application

In my Node application, I have a configuration file that exports some settings as an object like this: // config.js export var config = { serverPort: 8080 } Within another module, I import these settings and try to access the serverPort property: // ...

javascriptnode.jstypescriptecmascript-6es6-modules

Stop the execution of javascript code based on the screen width

On my website, I have two menus located in different sections of the page. One menu is shown when the screen width is greater than 555px, while the other menu appears when the screen width is less than or equal to 555px. Although the menus are essentially ...

javascriptcss

What is causing the content to overflow outside of the navbar on smaller screens or mobile devices?

/* *{ font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; overflow-x: hidden; } */ .main { min-height: calc(100vh - 10rem); display: grid; place-items: center; } p { font-size: 4rem; line-height: 1.6; } nav ...

htmljquerycssbootstrap-4

Having trouble invoking the "done" function in JQuery following a POST request

I am currently working on a Typescript project that utilizes JQuery, specifically for uploading a form with a file using the JQuery Form Plugin. However, after the upload process, there seems to be an issue when trying to call the "done" function from JQue ...

jquerytypescript

HTML script tag failing to load

As a beginner in using scripts in HTML, I'm currently following a tutorial that suggests loading the script after the body for certain reasons. In my own code, I found that I need to place the script both in the head section and after the body. Remov ...

javascripthtmljquery

What is the best way to add a background image to a div without a fixed height in order for it to span the full width and

I am trying to incorporate a background image into a div element in such a way that it behaves like a background image in the body. I have looked at an example here: http://plnkr.co/edit/gFZZgPmSKMDu3gZEp1H0?p=preview where the width and height adjust ba ...

htmlcss

"Encountered a problem while setting up the Mailgun webhook to handle both multipart and URL encoded

I have been working on creating a web hook listener for Mailgun, and I encountered an issue when I realized that Mailgun can post webhooks using either multipart or x-www-form-urlencoded content-types. Currently, my code uses Multer to handle multipart b ...

javascriptexpress

Creating dynamic components in ReactJS allows for versatile and customizable user interfaces. By passing

Within the DataGridCell component, I am trying to implement a feature that allows me to specify which component should be used to render the content of the cell. Additionally, I need to pass props into this component. Below is my simplified attempt at achi ...

javascriptreactjstypescript

Personalized hover effect using CSS on Caldera Forms

Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...

csswordpress

Uncovering data treasures on the web with BeautifulSoup: Extracting JSON files from DIV elements made simple

As I attempted to extract data from a website using standard class names for the required elements, I came across an interesting discovery. Near the top of the HTML code, there was what appeared to be a JSON file containing all the necessary information. ...

htmljsonpython-3.xbeautifulsoup

Setting the value for a HiddenField using jQuery in an ASP.NET application

Is there a way to set a value for a HiddenField control using jQuery? function DisplayContent(obj) { var FareValue = $(obj).closest('tr').find("[id*=lbFare]").text(); $(obj).parent().parent().find('[id*=pnlGrd]').show(); $ ...

javascriptjqueryasp.net

Generate an HTML dropdown menu based on the item selected from the autocomplete input field

I have a PHP page that searches the database and returns JSON results to an autocomplete input field: When I display the response from the PHP file (as shown above), it looks like this: { "success": true, "results": [{ "name": "Bananas, r ...

javascriptphpjson