Increase `@max-content-width` variable
Opened this issue · 3 comments
Subject of the enhancement
Proposal to increase the size of the content container to be wider than the current 960px equivalent.
Initial thoughts on what the value could be range from 1024px to 1280px with pros and cons for each end.
Past knowledge suggests 1120px would be a happy medium between the two ends of the range whilst also allowing the media component to fit entirely on screen for the wide, but small in height, laptop screens.
Your environment
- Master
Now, that is an interesting question....
Factors to include:
- media aspect ratios
- device aspect ratios
- browser / device / site fixed address, controls and navigation bars - lets assume we can use 80% of the screen height
Everything in green in the charts below, signifies that the media will use less than or equal 80% of the available screen height.
The colours spreading into the top left are simply media ratios vs device ratios, showing the % device height occupied.
The green coming in on the middle and lower left, are the media ratios vs device sizes, with max-width capped at the values 900, 1024, 1120 and 1280, showing the % device height occupied.
900 max width:
1024 max width:
1120 max width:
1280 max width:
What you should be able to see, is that:
- Portrait screens are much better at catering for a wide range of media aspect ratios
- The shorter the device aspect ratio, the harder it is to fit in a media
- There are a lot of devices when at landscape, that are thinner than the max-content width, which will always be cut off with most media aspect ratios
- The shorter the desktop/laptop screen, the more the max-content width issue is exacerbated
More specifically:
- 900 is good with 16:9 and 16:10 medias
- 1024 is good with 16:9 medias
- 1024 breaks at 16:10 medias at the 1280x720 and 1366x768 sizes
- 1120 breaks at 16:9 medias at the 1280x720 and 1366x768 sizes
I think 1024 is the maxium you could go, supporting 16:9 media only at short laptop/desktop widths.
Obviously this changes slightly if you choose 90% as a good available height, the above is only a rough model.
It may be worth having a max-width + horizontal center on media which must retain their aspect ratios, where we know they will overhang the viewport? That would a mean variable max content width on media components.
References:
@max-content-width: @device-width-large;
The max content width went up from 900 to 960 with the breakpoints merge.
I mentioned this in this thread (adaptlearning/adapt-contrib-core#364), going forward we need to think about this in the context of a more modern layout grid mentioned in that breakpoints thread. Personally, I would leave this at 960 for now and increase the width with some supporting less for other layout furniture. If we wanted to do this now, ideally this would be the same as a future content width, I'm suggesting 1200 but this needs some more thought.
@oliverfoster is absolutely right about media components and viewport height due to aspect, but I don't think this should limit the content width because of this. Rather we should limit the width of a full span media component and / or redesign it to work nicely / look good.