On pages with little content, the footer is flush with the page content, rather at the bottom of the page. This may appear unprofessional to users, thus giving them a negative impression and decreases their trust in the website.
Possible solutions include adding position fixed to the footer or adding flex-grow: 1 to the page content so it takes up the entire height of the screen, thus pushing down the footer.
Steps to Reproduce
Visit a page with little content, for instance, the 404 error page. URL: karinasong.com/public/pages/error.php
Go into Dev Tools to emulate different device sizes to observe the page layout.
Expected Result
User is viewing a page where the footer is at the bottom of their device screen with no whitespace below the footer.
Actual Result
The footer is directly below the page content and white space can be seen below the footer.
Environments
This bug can be seen on any page that does not have enough content to push the footer to the bottom of the screen. Thus, it is present across all environments on all modern browsers.
Screenshots
Screenshots below showcase that this bug is present on multiple device screens. The red indicators show how much white space is between the footer and bottom of the device screen.
Description
On pages with little content, the footer is flush with the page content, rather at the bottom of the page. This may appear unprofessional to users, thus giving them a negative impression and decreases their trust in the website.
Possible solutions include adding position fixed to the footer or adding flex-grow: 1 to the page content so it takes up the entire height of the screen, thus pushing down the footer.
Steps to Reproduce
Expected Result
User is viewing a page where the footer is at the bottom of their device screen with no whitespace below the footer.
Actual Result
The footer is directly below the page content and white space can be seen below the footer.
Environments
This bug can be seen on any page that does not have enough content to push the footer to the bottom of the screen. Thus, it is present across all environments on all modern browsers.
Screenshots
Screenshots below showcase that this bug is present on multiple device screens. The red indicators show how much white space is between the footer and bottom of the device screen.
iPhone 12:
iPad Mini:
Large Desktop Screens (2560px width):