Bottom is not adhering properly to the page (blocking content)

Hey there! I'm using Weebly as a CMS for my website, and I've encountered some issues with a custom footer. Specifically, on this page:

The content seems to disappear if you're not using a large monitor and the page height is short. Upon inspection of the element, I am currently utilizing position:absolute and bottom:0.

If anyone could provide insight into what might be causing this issue, I would greatly appreciate it.

Thank you!

You can find the complete code snippet below:

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
</head>

... (remaining HTML code goes here) ...
htmlcss

Answer №1

For better results, consider using position: fixed instead of position: absolute for the .custom-footer element.

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

Altering child components' properties from the parent component in Vue.js

Presenting the Tabs.vue component featuring four tabs: <template> . . <v-tab href="#tab-1" @click="showFirstTabFunc"> First Tab <v-icon>check_box_outline_blank</v-icon> </v-tab> <v-tab hr ...

javascripthtmlvue.jsvuejs2vuetify.js

Can CSS be used to automatically focus on a div element?

Can CSS be used to set autofocus on a div element? <div class="form-group" style="margin-left:10px"> <label for="organizationContainer" class="nmc-label">@Res.GroupStrings.CreateNewGroupOrganization</label> <div id="organiza ...

javascripthtmlcss

Position the div to align with just one side of the table-cell

I am struggling with making the height of my code dependent on only the left column, while still allowing the right column to be scrollable if it contains more content than the left column. Despite my best efforts, I can't seem to figure out how to a ...

htmlcss

Conceal series of images with a click; reveal them again once completed

I'm working on a layout featuring overlapping images and I'm looking to create a hide-and-seek effect where the images are hidden one by one when clicked, and then shown in reverse order until all of them are visible again – essentially creatin ...

htmljquerycsshideshow

Unlock the navigation tab content and smoothly glide through it in Bootstrap 4

Hey there, I have managed to create two functions that work as intended. While I have some understanding of programming, I lack a background in JavaScript or jQuery. The first function opens a specific tab in the navigation: <script> function homeTa ...

javascripthtmljquerybootstrap-4

Managing button spacing with Bootstrap 4 in an Angular 2 CLI application

I find it puzzling why the alignment between Bootstrap buttons within the Angular 2 CLI project is not working as expected. To address this issue, I followed the instructions to create a new Angular 2 CLI app outlined here: https://angular.io/guide/quicks ...

htmlcssangularbootstrap-4

Trouble with CSS sprites displaying text alongside images

My current CSS code is set up to display images using CSS image sprites as background images. The images are displayed based on the file extension, however, the href/link text is not appearing in line and is splitting into two lines. a[href$='.pdf& ...

htmlcsssprite

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

javascripthtmlcss

I am having trouble getting all the HTML content to properly display in the GitHub zip file

I am encountering an issue where the index.html file is not displaying the navigation or images as expected. For reference, the project can be found at https://github.com/LawlietBlack/Persona-4-Golden-Guide If there is a more appropriate place to ask this ...

htmljquerycssjsonangularjs

I'm feeling a bit lost on how to pull out HTML tag elements using Python

I have been attempting to extract the html tags for alternative purposes, but due to the structure of the html file, I am facing challenges using conventional methods to locate the elements. The section containing the elements is quite long (consisting of ...

pythonhtmlselenium-webdriverweb-scraping

Disable automatic focus on first button in PrimeNG Dialog

I am looking for a way to stop the autofocus on the first input element when opening the PrimeNG dialog. <p-dialog header="User Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" (onAfterHide)="onDialogHide ...

htmlangularprimengprimeng-dialog

"Utilizing CSS exclusively in conjunction with a PHP API for seamless integration

My CSS is working only when inline, and I'm struggling to track down the reason for this issue. As a beginner in web design, I am unsure of what steps to take to troubleshoot the problem. Since I cannot open the console to check for errors, what facto ...

phphtmlcssapi

Top-rated program for creating user guides using HTML code

I am currently working on a project that involves creating end-user documentation for a software application. However, the software will be retired next year, so I do not want to spend too much time on producing a professional-grade manual. The documentati ...

phphtmlmultimediaend-useruser-manual

I'm looking to create a JavaScript function that will extract each element from a div and then apply a corresponding CSS block to activate it

My goal was to create this function using Flask, but it seems that only JavaScript is capable of achieving it. This is my first attempt at coding it. Here's the code snippet: const navSlide2 = () => { const burger = document.querySelector(&apos ...

javascripthtmlcss

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

How can I make a Bootstrap 5 container adjust to the height of the screen?

I am currently working with Bootstrap 5 and facing an issue while displaying a calendar on the screen. The height of the container appears to be around 25% longer than the screen height. I have tried setting the height to "100%" and "80%" in the CSS, but i ...

htmlcssbootstrap-5

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress

Verify whether a group of div elements overlaps a fixed div while scrolling

I have a layout with a list of posts and a logo positioned at the bottom of the page. The issue I am facing is that sometimes the title of the posts and the logo overlap, and I want to set the logo's opacity to 0.25 only when the text from .cat-date i ...

javascriptjquerycss

How come the HTML content stored in a Mongodb document in JSON format is showing up as plain text on the webpage?

I am currently working with a mongo database that contains a document including some HTML content. However, when I attempt to display this content on a webpage, it appears as plain text rather than rendered HTML. Here is the JSON snippet showcasing the HTM ...

htmljsonmongodbmeteor

Unable to Pause Video with Javascript

I have a project with a video that plays in a continuous loop. Below is the HTML code for the video tag: <video playsinline autoplay muted loop id="myVid"> <source src="River.mp4" type="video/mp4"> </video> My goal is to make the vi ...

javascripthtmlvideopause