Open rhyslawry opened 7 years ago
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?
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. Thepathfinder-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
, andpathfinder-2
are used across Unimelb sites?Examples
>1400px wide: (1410px)![image](https://user-images.githubusercontent.com/15081925/27890346-73032e58-6235-11e7-8ec0-fb5062600c58.png)
<1400px wide: (1350px)![image](https://user-images.githubusercontent.com/15081925/27890364-814ba472-6235-11e7-8acc-1a7b88facbb6.png)
e.g. This is what http://science.unimelb.edu.au/#courses looks like on my small laptop screen:![image](https://user-images.githubusercontent.com/15081925/27891185-973d905a-623b-11e7-82b7-575a30fc2752.png)
When it would look much better like this: (exact same width screen)![image](https://user-images.githubusercontent.com/15081925/27891221-e17f1756-623b-11e7-9c4b-636c84a7ddc3.png)
This was achieved by changing the![image](https://user-images.githubusercontent.com/15081925/27891271-371e97c2-623c-11e7-8cf8-b26916cddb9e.png)
min-width
from1400px
to1200px
: