Ensure that the text remains at the bottom of the page when viewed on a

After encountering this inquiry on Stack Overflow: How can text be placed in the upper or lower right corner of a "box" using CSS, I came up with the following code:

#copyright {
  position: absolute;
  bottom: 0;
  right: 2;
  width: 100px;
  text-align: center;
}

#creator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  text-align: center;
}

On desktop, the code works as expected. However, when tested on Google's Chrome emulator for mobile devices, the text does not stay at the bottom after scrolling, similar to how a sticky footer behaves. I attempted to replicate the issue on a JSFiddle, but was unsuccessful. Here is a screenshot of the problem:

https://i.sstatic.net/ZAtnP.png

If you have any suggestions or solutions, please share! Thank you.

Answer №1

It is advisable to utilize the CSS property position: fixed instead of absolute.

Answer №2

To achieve the desired layout, consider applying position: relative to the body selector.

body {
  position: relative;
}

By implementing this style rule, the placement of the #copyright and #creator elements will become absolutely positioned in relation to the body, aligning perfectly with your design objectives.

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

In PHP, special characters in HTML remain unchanged when entered into a text input field

I am currently using the PFBC (PHP form builder class (PFBC)) to generate a TextBox element on a page; However, when dealing with strings containing special characters, it does not properly convert them into normal characters: For example: $razao = "livi ...

How can I simultaneously submit both the file and form data from two separate forms on a single page using PHP?

My webpage features a form with a series of questions, each followed by an option to upload files if available. I made sure not to nest forms within each other, instead using a method where the upload form pops up separately. However, I encountered an issu ...

Aligning content vertically in Bootstrap 4 so it is centered

I've been struggling to center my Container in the middle of the page using Bootstrap 4. I haven't had much luck so far. Any suggestions would be greatly appreciated. You can check out what I have so far on Codepen.io and experiment with it to s ...

Guidelines for adding text before and after a specific substring using regular expressions

I was learning how to format a string in Perl by adding html tags. The string S follows this pattern: net insider gain of xyz Rupees .............. To convert string S to the following format: <p class="Green">net insider gain of xyz</p> Ru ...

Database not receiving input data from AngularJS form submission

Having some trouble saving form data to the database using angularjs. Not sure what I'm doing wrong. Here's my HTML form: <form id="challenge_form" class="row" > <input type="text" placeholder="Challenge Name" ng-model="ch ...

Animation of hand-drawn letters using SVG technology

I'm exploring SVG animations and am currently struggling with animating a slogan letter by letter. The font is handwritten and should give the effect of being written with a text marker. Can anyone provide me with some tips on how to approach this cha ...

Having issues with the basic KnockoutJS binding not functioning as expected

There appears to be an issue with my KnockoutJS script that I'm struggling to pinpoint. Below is the snippet of HTML code: <h2>SendMessage</h2> <div class="form-group" id="messageSender"> <label>Select User Type</l ...

A guide to loading CSS and JavaScript files asynchronously

Is it possible to use loadCSS (https://github.com/filamentgroup/loadCSS/blob/master/README.md) to allow the browser to asynchronously load CSS and JavaScript? This is what I currently have in my head tag: <link rel="preload" href="http://zoidstudios. ...

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

Opting for a name selector over an id for more specific styling

Is there a way to modify the code below in order to make it function based on a name selector instead of an id? <div id="light" class="change_group_popup"> <a class="close" href="javascript:void(0)">Close</a> JavaScript $('.ch ...

Is there a way to incorporate HTML input text into an image with CSS?

Here is an image that I have: https://i.sstatic.net/wHNk1.png Is there a way to add input fields to this image? I want the user to be able to click on the input fields (green boxes) within the image and enter values. How can I achieve this? ...

Customizing the appearance of an Ant-Design 'Select' component: A step-by-step guide

If I wanted to change the default white background color of the Select component to green, what would be the correct approach? My attempt... <Select style={{ backgroundColor: 'green' }}> // Options... </Select> ...did not work ...

Table created by Javascript is malfunctioning

Is there an obvious mistake to be found? Why isn't the Javascript generated table from the showResults function displaying on my HTML page? This issue always arises when I need to include a large number of literal values... I would also welcome feedba ...

Update the table with information from a designated URL every 5 seconds

So here's the situation: I've got a dynamic HTML table <table id="example"></table>. The data displayed in this table changes according to the URL. Normally, my default URL looks like this: index.php?action=add To handle this, I&a ...

Disabling the scaling feature in IE11's WebBrowser control: A step-by

After investing 48 hours into resolving this particular issue, I am reaching out to the knowledgeable StackoverFlowers community for assistance. My current project involves developing an application for large 27-inch multi-touch screens using C# 4.5. Withi ...

The footer is being covered by the section, despite my attempts to address the issue with

I have noticed a section overlapping issue and I am struggling to figure out the cause. I have attempted using margins and padding to adjust the footer with my .div-wrap, but so far it has not been effective. After searching around, I am still uncertain ...

Binding the Ionic v3 page with Ionic framework

I need to bind an ionic input component to an html page from a ts file, but it is only displaying text. Here is my html code: <div class="one" [innerHtml]="htmlToAdd"></div> This is the code in my ts file: constructor(public sanitizer: DomS ...

Utilize the dropdown menu across all table cells in a table

My p-table has a unique feature - the last column contains three dots that trigger a dropdown menu when clicked. The only issue is that the fixed position of the dropdown menu does not align properly with the td element in each row. Check out the HTML cod ...

How can I correctly embed a PHP variable within an HTML document?

How can I properly include the variable $var from the file.php: <?php $var = 5; ?> and use it in this php file with embedded html code: <?php include "file.php" ?> <!doctype html> <html lang="en"> <head&g ...

What is the most efficient way to fill an input field using jQuery with only two inputs?

I am working with a set of five input elements, all sharing a class called "cheque". Is there a way to selectively fill only one of these inputs using jQuery? Unfortunately, I am unable to utilize the validator jQuery library for this task. The following ...