fix(docs): make footer sticky and layout responsive on mobile - #63
Open
igorgbr wants to merge 1 commit into
Open
fix(docs): make footer sticky and layout responsive on mobile#63igorgbr wants to merge 1 commit into
igorgbr wants to merge 1 commit into
Conversation
Replace the absolutely positioned footer with the flex sticky-footer pattern already used in lookuptimezonetime.html. In credits.html and utcsecondstodatetime.html the footer also had to be moved to be a direct child of <body> - it was nested inside Bootstrap .row containers (and outside <body> entirely in the latter), so no CSS could position it. Cap input width so pages no longer scroll horizontally on small screens. Closes ArjunSharda#41
Author
|
Thanks @ArjunSharda PR is up. It needs your approval to run the workflows — |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #41
Problem: the footer used
position: absolute; bottom: 0; height: 15vh, so it left the document flow and overlapped page content, and the fixed15vhclipped its own contents on short viewports. Incredits.htmlthe<footer>was nested four levels deep inside Bootstrap.rowcontainers, and inutcsecondstodatetime.htmlit sat outside<body>altogether (the<body>tag was opened inside<head>) — so it could not be positioned by CSS at all. Fixed-width inputs (size="30") inside.p-5containers also caused horizontal scrolling below ~400px.Fix: applied the flex sticky-footer pattern already used in
lookuptimezonetime.html(bodyas a flex column withmin-height: 100vh,footer { margin-top: auto }) tocdits.css,dttu.css,tcl.css,ustdt.cssandlegal/brandingcss.css; moved<footer>to be the last child of<body>in the two broken pages and fixed their duplicated<html>tags and stray</div>s; addedmax-width: 100%to the inputs. No new dependencies, JS untouched.Tested at 320px / 375px / 768px and desktop, on every page.