Skip to content
This repository has been archived by the owner on Feb 5, 2020. It is now read-only.

Adjust pathfinder breakpoint #903

Open
rhyslawry opened this issue Jul 6, 2017 · 1 comment
Open

Adjust pathfinder breakpoint #903

rhyslawry opened this issue Jul 6, 2017 · 1 comment

Comments

@rhyslawry
Copy link

rhyslawry commented Jul 6, 2017

Expected behaviour

Pathfinder-4 should ideally appear in one row for most devices, and not split into two rows quite so early.

Actual behaviour

The pathfinder-4's current break-point width is 1400px - Below which it splits into two rows.
The pathfinder-3's responsive breakpoint is only 769px, after which it breaks out into a single column.
Many people viewing pages on laptops have a screen width below 1400px, the most common being around 1280px, casing them to see an ugly two-row version of the pathfinder on all sites. (see examples below)

I agree with @axelboc that the pathfinder looks bad when it's split over two rows. I would suggest we lower the pathfinder-4's responsive minimum breakpoint to be something more reasonable like 1200px, that would include many laptop screens.

The pathfinder-4 is by far the most common pathfinder type used across the university.

@dkevey do you have some analytics from funnelback on how many of each of pathfinder-4, pathfinder-3, and pathfinder-2 are used across Unimelb sites?

Examples

>1400px wide: (1410px)
image

<1400px wide: (1350px)
image

e.g. This is what http://science.unimelb.edu.au/#courses looks like on my small laptop screen:
image

When it would look much better like this: (exact same width screen)
image

This was achieved by changing the min-width from 1400px to 1200px:
image

@rhyslawry
Copy link
Author

Hey @axelboc
Any more thought about adjusting the two-row breakpoint for the pathfinder-4 from 1400px to 1200px?

Apparently 1366 x 768 has recently become the most common screen resolution, meaning many people on laptops are missing out by a measly 34px, and are seeing the very popular pathfinder-4 component split into two rows when it looks best in one single row

Could this be included in the next Design System patch?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant