Add the screen xl-max and screen xxl-min to Varbase Media breakpoints

Created on 6 December 2021, over 2 years ago

Updated 29 May 2023, about 1 year ago

Problem/Motivation

Bootstrap 5 has a new xxl in the breakpoints
And the new full content container width is 1400 PX
And It is needed to change responsive image styles to support the xxl break point.

Proposed resolution

Add the following to varbase_media.breakpoints.yml

varbase_media.screen-xl-max:
  label: screen-xl-max
  mediaQuery: "all and (max-width: 1399.98px)"
  weight: 9
  group: varbase_media
  multipliers:
    - 1x
    - 2x

varbase_media.screen-xxl-min:
  label: screen-xxl-min
  mediaQuery: "all and (min-width: 1400px)"
  weight: 10
  group: varbase_media
  multipliers:
    - 1x
    - 2x

Update all responsive image styles to work with the new media break point.

Remaining tasks

✅ File an issue about this project
✅ Addition/Change/Update/Fix to this project
✅ Testing to ensure no regression
✅ Automated unit/functional testing coverage
➖ Developer Documentation support on feature change/addition
➖ User Guide Documentation support on feature change/addition
✅ Code review from 1 Varbase core team member
✅ Full testing and approval
✅ Credit contributors
✅ Review with the product owner
✅ Update Release Notes and Update Helper on new feature change/addition
✅ Release varbase-10.0.0-alpha1 → , varbase_media-10.0.0-alpha1 →

Varbase update type:

✅ No Update
➖ Optional Update
➖ Forced Update
➖ Forced Update if Unchanged

User interface changes

When navigating to any Varbase Media responsive image styles.
the following new breakpoints will show up and be available to switch image styles to work with the 1400px new container width standard no the older 1200px one.