What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up!

<footer className="footerContainer">
      <div className="footerText">© 2019 Designed and Programmed by Othman El houfi</div>
</footer>

footer {

  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  word-wrap: break-word;

  .footerText {
    text-align: center;
    color: rgba(0, 0, 0, 0.58);
    font-style: italic;
    font-size: 10px;
  }
}
htmlcsssass

Answer №1

To create a responsive footer, you can utilize media queries to adjust the positioning based on screen size. For example, if the screen size is smaller than 768px (like a tablet), change the footer position from absolute to relative to resolve any layout issues.

footer {
  position: relative;
}

@media only screen and (min-width: 768px) {
  footer {
    position: absolute;
    bottom: 0;
  }
}

Alternatively, consider setting the footer position to fixed for it to always stay at the bottom:

position: fixed;
bottom: 0;
left: 0;

Ensure this is applied specifically for larger screens beyond mobile resolutions.

Answer №2

Enclose your website footer using a div element and set its minimum height to 100vh.

Answer №3

Make sure to enclose your content within a div element with a property of min-height: 100vh;. Currently, your footer is being positioned based on the body element, which is only as large as its content.

The properties like top, right, bottom, and left determine the offsets from the edges of the element's containing block. (The containing block refers to the ancestor relative to which the element is positioned.)

css positioning

An absolutely positioned item is placed based on its closest positioned ancestor; however, elements with a position of static are not considered positioned. Since it seems that the nearest ancestor of the footer is the body, you must define the position of the body, even if it's just:

body {
  position: relative;
}

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

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

cssreactjsnext.jstailwind-css

PHP function array_sum returns the sum of all values in an array rather than displaying each number

I have a collection of unique "coupons" with corresponding "productid"s https://i.stack.imgur.com/IgtFN.png My goal is to transform this list into an array using: $claimed = array($rowOrder['productid']); The problem arises when I attempt to ...

phphtmlmysqlpdo

What is the proper way to utilize the name, ref, and defaultValue parameters in a select-option element in React Meteor?

I recently developed a Meteor project using ReactJS. I have a Create/Edit page where I use the same input field for various form elements. Here is an example of code snippet that I currently have: <FormGroup> <ControlLabel>Province</Control ...

javascripthtmlreactjsmeteorreact-bootstrap

Setting an Element's attribute is only visible in the console

Just dipping my toes into the world of Web Development. While playing around with some JavaScript within HTML, I decided to try updating the content of an element. Upon running the code below, "Updated Content" appears in the console as intended. However, ...

javascripthtmljquerybootstrap-5

Excessive Spacing Below Picture

I am trying to position an image and a div directly beneath it, but I am encountering an issue with a visible margin between the two elements. You can view the code snippet here: http://jsfiddle.net/d3Mne/1/ Upon further investigation, I have noticed that ...

htmlcss

Upon installation, the extension that replaces the new tab fails to detect the index.html file

edit: Check out the Chrome Extension here Edit 2: It seems that the recent update containing the index.html file was not published due to Google putting it under revision. Apologies for forgetting to include the index.html file in the upload zip, as I ...

javascripthtmljson

Hover effect malfunctioning on the website

I am in the process of building a website using WordPress with the 2017 theme. I recently added a link to my page by inserting the following HTML code: <a href="www." target="_blank"><span style="color: #0000ff;">text</span></a> A ...

htmlcsswordpress

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

javascripthtmlreactjsroutesnavigation

Adding content between previous and next buttons with the use of JavaScript

After successfully implementing the functionality for the previous and next buttons in my script, I was requested to include the date between the buttons like this: btnPrev issueDate btnNext < Date > Although I tried adding the date between the PREV ...

javascripthtmljquerycss

Tips for Identifying Different ID Values of HTML Elements with jQuery

Currently, I have two different divs on my webpage, each containing buttons and hidden fields. When I try to pass the value of the hidden field attached to the button in a jQuery function, I encounter an issue where clicking on the second div results in pa ...

javascriptjqueryhtml

Enhance the appearance of the <td> <span> element by incorporating a transition effect when modifying the text

I need help with creating a transition effect for a span element within a table cell. Currently, when a user clicks on the text, it changes from truncated to full size abruptly. I want to achieve a smooth growing/scaling effect instead. You can view an exa ...

javascripthtmljquerycss

Tips for adjusting the size of your Navigation bar

I've noticed that most of the questions I've come across are related to WordPress or Bootstrap nav bars, which I'm not familiar with. I've created mine using CSS. I want to enhance my navigation bar for mobile users by making the butto ...

htmlcss

Modifying the border of images in a Weebly gallery

I'm having trouble changing the gallery image borders on Weebly. The client prefers using Weebly for easy backend editing once the design is in place, so I need to work within these parameters. Usually, I can make most code edits easily...but this iss ...

jquerycssimage-galleryweebly

Running a CSS keyframes animation can be achieved by removing the class associated with it

Is there a way to reverse the CSS animation when a class is removed? I'm trying to achieve this on my simple example here: https://codepen.io/MichaelRydl/pen/MWPvxex - How can I make the animation play in reverse when clicking the button that removes ...

javascripthtmlcss

How do you eliminate row highlighting on the <TableRow> component within Material-UI's <Table> using ReactJS?

I am facing an issue with a table and row highlighting in my code. Even after clicking on a row, it remains highlighted. I attempted to use the <TableRow disableTouchRipple={true}> but it didn't work as expected. What can I do to remove the high ...

javascriptcssreactjsmaterial-ui

Switching between two states of a single 'td' element within a column

I am trying to implement a feature where only specific elements in the fourth column of a four-column table toggle when clicked. For example, clicking on an element in the fifth row third column should toggle the corresponding element in the fifth row four ...

javascriptjqueryhtmlhtml-table

I am interested in incorporating array elements into a class selector

I need help adding array elements into a class selector. The image attached shows the current result, but I want the divs to be separated like this $(document).ready(function () { var arr = ['top', 'right', "Bottom", &q ...

htmljquery

Is there a way to create a diagonal movement for an image by clicking on another HTML element?

<!DOCTYPE html> <html> <head> <meta charset="UTF-9"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function() { $(document).re ...

javascriptjqueryhtmlajax

How to efficiently center a jQuery Mobile Dialog on the screen using custom dimensions

I designed an app using jQuery Mobile and I'm looking to display a Dialog box when a button is clicked. The Dialog box should be centered on the screen with specified width and height. For reference, you can view the current version on jsfiddle. The ...

jquerycssjquery-mobiledialogmodal-dialog

CSS/SCSS/JS: Adjusting header height dynamically while keeping it fixed at the

Check out my Codepen demo here: https://codepen.io/nickfindley/pen/dJqMQW I am seeking to replicate the current behavior of the page without specifying a fixed height for the header. The goal is to make the header adjust dynamically based on the content, ...

javascriptcssfixed