fix(footer): center columns on small screens - #698
Open
coderboy-yash wants to merge 1 commit into
Open
Conversation
Fixes: containers#618 Below 996px the footer columns (Docs, Community, Projects) stack on top of each other but stay lined up on the left, so there's a big empty gap on the right side of every column. Centered the columns in that view so the space is even on both sides. Desktop layout above 996px is not touched. Signed-off-by: yash nigam <yashnigam.dev@gmail.com>
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.
Fixes: #618
Concisely describe the change
Below 996px, the footer's Docs/Community/Projects columns stack on top of each other but stay lined up on the left. Since the link labels are short, this leaves a big empty gap on the right side of each column — that's the "excessive padding on their right" from the issue.
Added one CSS rule that centers the columns when they're stacked, so the leftover space is spread evenly instead of sitting on one side. Nothing changes above 996px, where the columns already sit side by side.
Before screenshot / screen recording
Narrow desktop (900px):
Mobile (390px):
After screenshot / screen recording
Narrow desktop (900px):
Mobile (390px):
Checklist
git commit -s). The author email matches the sign-off email address.Fixes: #618in commit message