The footer refuses to adhere to the bottom of the page

On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button.

https://i.stack.imgur.com/txqAS.png

We attempted to fix this using CSS, but it either sticks and remains visible at all times or leaves the bottom and hides the submit button when scrolling.

.footerclass {
  background-color: #eeeeee;
  position: fixed;
  top: auto;
  bottom: 0;
  width: 100%;
  display: inline-block;
}

This issue is only occurring on the Contact Us page, where we are using a "Contact 7 form" through elementor. How can we resolve this so that the footer always stays at the bottom of the page regardless of the form's size?

htmlcsswordpresscontact-form-7elementor

Answer №1

To ensure your footer stays at the bottom of your content, add position: relative and min-height: 100vh to your main container (which seems to be your .site class). This will allow you to position the footer absolutely relative to the main container. The footer will always be at the bottom of the content but won't stick when scrolling. Even if there is not enough content to scroll, using min-height will ensure the footer remains at the bottom of the page.

Answer №2

It appears that the problem lies within the styling of the page.

@media (min-width: 768px){
  .elementor-section.elementor-section-height-full {
    height: 100vh;
  }
}

An easy solution would be to include this snippet in your custom css, but with the height set to "auto".

I have provided a screenshot from the inspector tool where the issue can be seen:

https://i.stack.imgur.com/BOq2q.png

The issue is not actually related to the footer, but rather the content overflowing behind due to the fixed height setting.

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

How to Retrieve JavaScript Array Data Using Ajax in a Wordpress Plugin and Store it in a PHP

function my_custom_js_action($value1, $value2) { ?> <script type="text/javascript" > jQuery(document).ready(function($) { var newData = { 'email': '<?php echo $value1?>', 'p ...

phpajaxwordpress

Tips for establishing a minimum word requirement for your WordPress posts

I am working on implementing a code filter to enforce a minimum word count when saving or submitting a WordPress post. The code I have tried so far is as follows: function minWord($content) { global $post; $content = $post->post_content; if ...

phpwordpress

Tips for retrieving data from a database with just one key press

There is a text field that triggers a JavaScript function when a key is pressed. <input type="text" class="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4"> The function takes the input from the text field and searches for a result in t ...

phpjavascripthtmlajax

How can I customize the dropdown list arrow to match my own design?

Is there a simple way to substitute the standard arrow in the dropdown menu with a custom arrow image? ...

htmlcssdrop-down-menustyling

What is the best way to incorporate component-specific CSS styles in React?

This is the layout that I am attempting to replicate (originally from react-boilerplate): component |Footer |style.css |Footer.js In Footer.js, the styles are imported in a very elegant manner like this: import React from 'react'; im ...

javascripthtmlcssreactjswebpack-dev-server

Having trouble with changing the color of an element when the radio input is checked?

Can someone help me troubleshoot this HTML and CSS code? <label class="radio"> <input type="radio" name="plan" value="plan" required> <span> <h6>Plan</h6> <i class="pe-7s-graph1 ...

htmlcss

Positioning an immovable element beneath a fixed element that can vary in height

I am working on a webpage that features a fixed menu at the top-left corner, followed by the main content. My goal is to ensure that the content appears below the menu, but since I do not know the exact height of the menu in advance (as it can vary based o ...

htmlcsscss-position

Making modifications to the CSS within an embedded iframe webpage

Assigned with the task of implementing a specific method on a SharePoint 2013 site. Let's dive in. Situation: - Within a page on a SharePoint 2013 site, there is a "content editor" web part that displays a page from the same domain/site collection. T ...

javascriptjqueryhtmlcssiframe

Update the background image to be smoother, with no text overlay

I am working on a website where I need to smoothly change between background images. Here is the JavaScript code I currently have: var bg=[ 'images/best.jpg', 'images/61182.jpg', 'images/bg.jpg' ...

javascripthtmlcss

Exploring the possibilities of integrating CSS and JavaScript in Node.js with Express

Here is the folder structure I am working with: lifecoding |login2 |index.html |css style.css |js index.js I have all the necessary modules installed for express to work properly. However, when I try to set the static path as shown below, it keeps ...

javascripthtmlnode.jsexpress

Steps to Create an HTML Text Box that cannot be clicked

Does anyone know of a way to prevent a text box from being clicked without disabling it or blocking mouse hover events? I can't disable the text box because that would interfere with my jQuery tool tips, and blocking mouse hover events is not an opti ...

javascripthtmlcss

Modify the button text when it is hovered over

I am attempting to modify the text displayed on a button when hovering over it in a React component from Ant Design. However, I have not been successful so far. Button <div className={ status == "verified" ? `${styles.btn1} ${styles.btn1C ...

javascriptcssreactjs

Using CSS to showcase div elements with varying dimensions

How can I arrange divs with varying heights to be positioned close together, regardless of their height, and with a specific margin similar to buildings? I am aiming for a layout like the one on this website . I tried using float:left but it only float ...

htmlcss

Tips on adjusting the width of a div container based on the size of an

I am struggling with setting the width of my "picBox" div equal to the image tag inside. I have tried adjusting the CSS code but cannot seem to get it right. Any suggestions on how to solve this issue would be greatly appreciated. Thank you. The CSS code: ...

htmlcssasp.net

Disorderly arrangement of HTML elements

I'm facing some issues with the page layout as I have to use a combination of tables and divs. The main problem arises with the footer and the div containing the table. Despite the fact that the footer is the last element inside the "main_container" i ...

htmlcssout

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

javascriptcssangulartypescriptng-bootstrap

Storing Selenium WebElement in memory for extended periods to retrieve its details: A guide in C#

I am using Selenium and C# to monitor a website for any new items that may appear. The website contains a list of <div class="myClass"> elements displayed in a table format with multiple sub-divs. Periodically, I scan all the displayed divs to check ...

c#htmlseleniumdom

Creating a stylish gradient text color with Material-UI's <Typography /> component

Is there a way to apply a gradient font color to a <Typography /> component? I've attempted the following: const CustomColor = withStyles({ root: { fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", }, })(T ...

javascriptcssreactjsmaterial-uistyling

Arrange three input fields horizontally with labels positioned above each

I am facing a minor problem with aligning three input fields in the same row while maintaining equal spacing between each of them. I attempted to accomplish this using display: flex and space-between, but then the label appears to the left of the input in ...

htmlcssvue.jsvuejs2

Troubleshooting: Wordpress AJAX Login Failing to Redirect Upon Successful Login

I have successfully integrated AJAX-based login functionality into my Wordpress site by implementing the following code: functions.php function ajax_login_init(){ wp_register_script('ajax-login-script', get_template_directory_uri() . &apos ...

ajaxwordpresshttp-redirectauthentication