Bug: Footer Does Not Stick to Bottom on Pages with Minimal Content

RohitKV1n0d commented 7 months ago

Issue Title

Description

There is an issue observed across all pages of the website where the footer fails to stick to the bottom of the viewport on pages with minimal content. This issue becomes apparent when a user zooms out or when the page content does not fill the screen height. Instead of remaining at the bottom, the footer rises up, leaving an undesirable space beneath it.

Steps to Reproduce

Navigate to a page with minimal content.
Zoom out or adjust the browser window to a size where the content does not fill the viewport height.
Observe that the footer does not stick to the bottom of the viewport, leaving a visible gap below it.

Expected Behavior

The footer should stick to the bottom of the viewport on all pages, regardless of the amount of content or the size of the browser window, ensuring no gap is visible.

Actual Behavior

On pages with minimal content, the footer does not stay at the bottom of the viewport when the page is zoomed out or the browser window is larger than the content height.
A gap appears below the footer, which detracts from the website's overall appearance and professionalism.

Possible Solution

Implement a CSS solution that utilizes position: absolute;, position: fixed;, or the modern flexbox layout with justify-content: space-between; in the body or main container to ensure the footer remains at the bottom.
Use a wrapper for the content with a min-height of 100vh (viewport height) to ensure that the footer stays at the bottom even when the content is not enough to fill the screen.

Implementation Checklist

[ ] Review and select the appropriate CSS strategy (absolute positioning, fixed positioning, flexbox) to fix the footer position.
[ ] Apply the chosen CSS solution to a test environment to ensure compatibility across all browsers and devices.
[ ] Test the solution on pages with varying content lengths to ensure consistent behavior.
[ ] Roll out the update to all pages on the live website.
[ ] Conduct a final review to ensure the issue is resolved across all environments.

Additional Information

RohitKV1n0d commented 4 months ago

@swathikrishnaus Why is this tagged INVALID ?

swathikrishnaus commented 4 months ago

@swathikrishnaus Why is this tagged INVALID ?

Removed that label

RohitKV1n0d / orange_cat_web