mobile-friendly sticky footer

Currently working on a website project utilizing Bootstrap 3 (http://www.patrickmanser.ch/fnws) and I am trying to implement a sticky footer. After adapting the code snippets from Bootstrap 3 examples according to my specifications, everything seems to function flawlessly on a standard desktop display. However, upon transitioning to mobile-sized screens, an issue arises where the footer overlaps the content. My assumption is that this occurs due to the changing height of the footer, as it aligns with the grid system I have implemented there. Feel free to examine the source code (main.css); nevertheless, the key segments involved are detailed below:

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 237px;
    overflow-y: scroll;
    background-color: #eee;
}

#page-footer {
    position: absolute;
    bottom: 0;
    min-height: 200px;
    background-color: #333;
    width: 100%;
    color: #999;
}

.copyright {
    background-color: #222;
    min-height: 50px;
    color: #666;
    width: 100%;
    text-align: center;
    line-height: 50px;
}

At present, I am uncertain about the optimal resolution for this issue or if there exists a feasible solution at all. Any guidance provided would be highly valued!

Answer №1

Your copyright statement currently has a "min-height: 50px;" property.

To prevent it from pushing up against the top of the body content, consider changing it to just "height: 50px;". This will avoid forcing it to accommodate the line-height of 50px.

Alternatively, you could also decrease the line-height to a shorter value like 20px. This adjustment would lessen the impact on the body content when viewed on mobile devices.

I recommend starting by reducing the line-height and testing if that resolves the issue before removing the "min" property.

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

The significance of Z-index in Embedded Email Subscription Code

I am encountering an issue with a pop-up window I have created for visitors to sign up for our mailing list. The problem is that the CSS menu appears on top of the pop-up, despite setting the menu's z-index to 9999. How can I adjust the z-index in the ...

Change the parent's color when the child is hovered over

head has no background and the color is black. On mouseover, its color changes to white with a black background, so far so good but When I hover over content, I want to change the color of head. How can I achieve this? Is it possible using only CSS? < ...

Accessibility considerations for anchor tags with no content

Currently on our website, there is a component that utilizes an <a> tag with a background image set by the following CSS: a.class-name::after { content: url('image.png'); } The anchor tag itself has no visible content (appears as < ...

Javascript code for scrolling to the top isn't functioning as expected

I found a helpful code snippet for adding a scroll to top button on my webpage at the following link: http://jsfiddle.net/neeklamy/RpPEe/ Although I implemented the code provided, unfortunately, the scroll to top button is not displaying correctly. Here ...

Adjust the properties within the component's styles using Angular 2

In this project, the objective is to dynamically change the background-color based on different routes. The goal is to display a specific color for UpcomingComponent while keeping the background-color consistent for all other routes. The approach involves ...

Adjusting containers for optimal display during browser zoom and resize operations

Currently, I have designed a banner using a triangle and rectangle to overlay an image. However, when the browser is zoomed in, there seems to be a gap between these two shapes. I am looking for suggestions on how to better connect or approach this banner ...

Is there a way to convince Python to interpret data as a multi-dimensional list instead of a string when converting from HTML?

Currently, I am working on formatting table data in HTML and then sending it to Python using the script below: var html_table_data = ""; var bRowStarted = true; var count1 = 1 $('#woTable tbody>tr').each(function () { if (count1 != 1) { ...

Unable to retrieve input values from the text fields using JavaScript

In my project, I have created two PHP pages - "doc.php" and "chkval.php". The issue I am facing is that the textfield values are not being captured in the "chkval.php" page using $POST method. An error that I encountered is: Use of undefined constant re ...

Adjust the color of the active link on the page using Angular and CSS

I have a project that I need to modify by adding a sub menu that appears on every page but is only coded once. My goal is to highlight the link for the current page, all within one HTML snippet. Although the list renders correctly, I'm struggling to g ...

Adjusting the rotation transform by deleting and reapplying canvas is causing the chart to not display data after redrawing

I am facing a challenge with my previous issue and I am exploring different solutions. One approach I am considering is to remove the canvas element completely and then re-add it, effectively resetting all rotations on the canvas. Although this method alm ...

Older versions of Internet Explorer, specifically IE 8 and below, are causing issues with iframe

I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...

Scrollable horizontal card list using Bootstrap

Looking to design a unique layout featuring a horizontal list of cards where 3 cards are displayed simultaneously, with the ability to horizontally scroll through the rest, like this: https://i.sstatic.net/KgX27.png While achieving this using CSS is stra ...

Ensure that HTML Tidy does not disrupt meta tags, specifically schema markup

Encountering a significant issue with the latest version of HTML Tidy - visit https://html-tidy.org. To summarize: HTML Tidy is altering these HTML code lines: <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <div cla ...

Utilizing jQuery to Toggle Visibility of Table Rows on Button Click

I have a unique layout on my page where there are two tables positioned side by side. The table on the left consists of buttons with company names, and the table on the right should display employees associated with each specific company. Upon initially l ...

The dimensions of the HTML table have expanded excessively following the execution of mysql_fetch_assoc

I have encountered an issue where, after inserting the database values into an HTML table, the table becomes too large. I've tried using CSS code to adjust it, but it doesn't help. Should I consider changing something in the database value type? ...

Populate HTML dropdown menu with data from an external JSON file

I'm attempting to populate a HTML Dropdown menu with information from an external JSON file, which consists of the following { "Destinations": [ { "destinationName": "London", "destinationID": "lon" }, { "dest ...

What could be the reason for the lack of definition of the `pieceOfText

My latest project involves a fun guessing game centered around decrypting text, but I've hit a snag with a variable in my JavaScript code. This variable, known as pieceOfText, should be assigned a random piece of text from an array containing 3 encode ...

The aligning property "justify-content: space around" does not behave as expected on a line and does not provide the desired spacing

Below is the HTML code I am working on: <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta na ...

Using Javascript/JQuery to attach a javascript object to a form in order to perform a traditional form

On a page, there is a form that consists mostly of plain HTML. One section of the form creates a quite complex multidimensional object using JavaScript. Usually, if I wanted to include a variable in the POST request, I would add an <input type="hidden" ...

Showing a variety of pictures within a specified time frame

In my CSS, I have defined classes that allow me to display different background images on a page at set intervals: .image-fader { width: 300px; height: 300px; } .image-fader img { position: absolute; top: 0px; left: 0px; animation-name: imagefade; ...