[BUG] Horizontal scroll due to footer padding

Question

[BUG] Horizontal scroll due to footer padding

rburkey87 opened this issue 4 years ago · 0 comments

Description

Copy/pasting issue reported in ServiceNow:
The CAS login page has a horizontal scrollbar on fullscreen view. Probably 99% of people don't notice or care, but it can be fixed by one line of CSS. I've attached a screenshot from Firefox Dev Tools showing the fix. The footer has a width of 100% (which, technically is not needed and can be removed to solve the problem). The right and left padding on the footer make it extend to beyond the viewport width. Element width, by default, is set to "box-sizing: content-box" which increases an element's declared width by adding padding and border width to it. The footer width is 100% + padding-right + padding-left). Adding "box-sizing: border-box" to the ".university-footer" class will include the padding in the total width and get rid of the scroll bar.

If the issue is with styling, please include screenshots!

Websites Affected

https://cas.byu.edu/

Issue Type

Is this (add an x in the boxes that apply)

A difference between the components and the Official Specification?
A bug, such as a Javascript error, or the UI not rendering properly
on a page?
Inconsistent appearance/behavior between browsers?
An issue on mobile browsers?
A request for a new feature/enhancement?

Browsers Affected

Add an x in all the boxes that apply. Please mark desktop and mobile
browsers separately.

We support the last two versions of Chrome, Firefox, Safari, and Edge.

Desktop Browsers

Mobile Browsers

Any browser on iOS
Chrome for Android
Firefox Mobile for Android
Other (please specify)

Web Site Platform

What is hosting your website?