inglorious-ratbastard / inglorious-ratbastard/chensofandog

Footer Sticky Positioning Regression After Responsive Layout Fix

Open
#7 0 comments 0 reactions 1 assignee Claimed by @inglorious-ratbastard View on GitHub
bug good first issue
Dominant language
EJS
Stars
0
Forks
0
Avg merge
10h 38m
Merged PRs (30d)
1

Description

**Commit:** `dfd0a21`

#### Summary

The Bootstrap responsiveness issues were successfully resolved through the implementation of custom CSS media queries. The application now adapts correctly across various screen sizes and device orientations. However, a minor regression was introduced affecting footer positioning.

#### Current Behavior

The footer is no longer consistently sticky across all viewport sizes. On certain devices and screen resolutions, the footer shifts slightly during page navigation and scrolling events. The issue is subtle but noticeable, particularly when transitioning between pages or when content height is close to the viewport height.

#### Expected Behavior

The footer should remain fixed to the bottom of the viewport when page content does not exceed the screen height and maintain a stable position during navigation, resizing, and scrolling operations across all supported device sizes.

#### Possible Cause

The issue may be related to one or more of the following factors introduced during the responsive layout adjustments:

* Media query overrides affecting container or wrapper heights.
* Changes to Bootstrap's flexbox layout behavior.
* Conflicts between `min-height`, `height`, or `vh`-based calculations.
* Footer positioning rules being overridden at specific breakpoints.
* Layout reflow occurring during page transitions or dynamic content rendering.

#### Impact

* Minor visual inconsistency.
* Does not affect application functionality.
* Most noticeable on tablets, smaller laptops, and certain mobile viewport dimensions.
* User experience impact is low but should be addressed to ensure consistent layout behavior.

#### Investigation Tasks

* Review footer-related CSS rules across all responsive breakpoints.
* Verify parent container height calculations (`100vh`, `min-height`, flex layouts).
* Test footer behavior on common viewport sizes.
* Check for conflicting Bootstrap utility classes and custom media query overrides.
* Validate footer positioning during navigation and content rendering events.

#### Priority

Low

#### Status

Known regression introduced after responsive layout fixes in commit `dfd0a21`.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.