Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

USWDS - Bug: Agency contact center in the footer component is not right-aligned in the grid #5214

Closed
2 tasks done
rachidatecs opened this issue Apr 5, 2023 · 0 comments · Fixed by #5234
Closed
2 tasks done
Labels
Affects: Markup 🟡 Suggestion would change the markup of a component Package: Footer Type: Bug A problem in the code
Milestone

Comments

@rachidatecs
Copy link

Describe the bug

The grid gap classes on that part of the footer cause a space on the right that misaligns what seems to be right-justified content and causes it to misalign from the grid. This misalignment becomes apparent if you have other right-justified content close-by:

Screen Shot 2023-04-05 at 10 09 33 AM

An easy fix that worked for me is to remove mobile-lg:grid-gap-2 on .usa-footer__logo and set the distance between the agency logo and title through CSS margin instead:

Screen Shot 2023-04-05 at 10 09 33 AM

I also removed the grip-gap on the parent grid-row in that usa-footer__secondary-section, but mileage could vary by use-case (in other word, some more work could be needed to fully align content in that section of the footer)

Steps to reproduce the bug

  1. Examine the alignment of the Agency section of the footer with the grid, specifically on the right side.

Expected Behavior

I expect the 'Agency Contact' section that is comprisd of the social nav, Agency Contact Center header and agency contact info to be right justified and align with the grid on the right.

Related code

No response

Screenshots

Screen Shot 2023-04-05 at 10 16 43 AM
Screen Shot 2023-04-05 at 10 09 33 AM

System setup

  • 3.4.1
  • OS
  • Chrome

Additional context

No response

Code of Conduct

@rachidatecs rachidatecs added Needs: Confirmation We need to confirm that this is an issue Status: Triage We're triaging this issue and grooming if necessary Type: Bug A problem in the code labels Apr 5, 2023
danbrady added a commit to danbrady/uswds that referenced this issue Apr 13, 2023
danbrady added a commit to danbrady/uswds that referenced this issue Apr 13, 2023
danbrady added a commit to danbrady/uswds that referenced this issue Apr 13, 2023
@mejiaj mejiaj added Package: Footer Needs: Discussion We need to discuss an approach to this issue Added during Sprint and removed Needs: Confirmation We need to confirm that this is an issue labels Apr 14, 2023
@mejiaj mejiaj self-assigned this Apr 15, 2023
@mejiaj mejiaj removed Needs: Discussion We need to discuss an approach to this issue Status: Triage We're triaging this issue and grooming if necessary labels Apr 27, 2023
danbrady added a commit to danbrady/uswds that referenced this issue May 16, 2023
danbrady added a commit to danbrady/uswds that referenced this issue Aug 4, 2023
danbrady added a commit to danbrady/uswds that referenced this issue Aug 4, 2023
danbrady added a commit to danbrady/uswds that referenced this issue Aug 4, 2023
@amyleadem amyleadem added this to the uswds 3.7.0 milestone Sep 14, 2023
@amyleadem amyleadem added the Affects: Markup 🟡 Suggestion would change the markup of a component label Sep 14, 2023
@amyleadem amyleadem modified the milestones: uswds 3.7.0, uswds 3.7.0B Sep 14, 2023
@mejiaj mejiaj removed their assignment Nov 16, 2023
thisisdano added a commit that referenced this issue Dec 6, 2023
USWDS - Footer: Remove additional space. Fixes #5214 (Bug)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Affects: Markup 🟡 Suggestion would change the markup of a component Package: Footer Type: Bug A problem in the code
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

3 participants