Map horizontal alignment is inconsistent between browsers

BlueSlug commented 3 years ago

Describe the bug

The accessibility map has inconsistent horizontal alignment within the Map page, depending on which browser is being used to view the site. In Chrome, the entire map and filters "assembly" is justified to the left side of the page, while in Firefox, it is centred. The result is not aesthetically pleasing, and a little jarring considering the main website navigation and footer are centre-justified.

To Reproduce

Steps to reproduce the behaviour:

In an affected version of Chrome, go to https://wecount.inclusivedesign.ca/map
See that the page contents are left-justified.

Expected behavior

The page contents should be centre-justified across all browsers, as it is in Firefox.

Screenshots

Chrome (undesired behaviour) 2021-06-12 wecount a11y map on left side (chrome not ok)

Firefox (desired behaviour) 2021-06-12 wecount a11y map on left side (firefox ok)

Desktop:

OS: Windows 10 Pro v20H2
Browser: Chrome 91, Firefox 89
Affects version: 2.6.0

Smartphone:

N/A, the issue will not present itself at smaller viewport widths.

Additional context

There may be other browsers affected by this issue. A workable fix may be to apply justify-content: center; to the rule #defaultContainer.map .content-wrapper

Another solution to consider which may require more work would be to make the page contents occupy the full width of the page at all times.

rwgers commented 3 years ago

Hi @BlueSlug,

Adding margin:auto; to #defaultContainer.map .content-wrapper aligns the map to the center.

Browsers Safari 13.1.3 Firefox 89.0

Fixes #611

carlosmarin96 commented 3 years ago

Hi! I'm new at open source.

Could I take this issue?

cindyli commented 3 years ago

@carlosmarin96, thanks for your interest in this ticket. @rwgers has described the solution.

Thanks for your help, @rwgers. Feel free to issue a pull request if you want.

inclusive-design / wecount.inclusivedesign.ca