Styling: ResponsivePrefixes
Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01
Description
Responsive Prefixes
in the jet sass files there are variables for responsive screen widths.
For Redwood theme:
$screenSmallRange: 0, 599.9px;
$screenMediumRange: 600px, 1023.9px;
$screenLargeRange: 1024px, 1439.9px;
$screenXlargeRange: 1440px, null;
And for Alta (Web, iOS, Android and Windows):
$screenSmallRange: 0, 767px;
$screenMediumRange: 768px, 1023px;
$screenLargeRange: 1024px, 1280px;
$screenXlargeRange: 1281px, null;
In this documentation you will see responsive classes that map to these ranges, these look like
oj-[size]-[xyz], where [size] can be sm, md, lg, xl, or print. The style applies to the screen width range specified and and wider screens. For example oj-md-hide hides content on medium, large, and extra-large width screens.
oj-[size]-only-[xyz], where [size] can be sm, md, lg, or print. The style applies only when the width of the screen is in the specified range, for example oj-md-only-hide hides content when the width of the screen is in the medium range only.
For xl just use the size class described above, for example oj-xl-hide.
oj-[size]-down-[xyz], where [size] can be md, lg, or print. The style applies to the screen width range specified and any smaller widths, for example oj-md-down-hide hides content on screens in the small and medium width range. For sm use the sm-only class described above, for example oj-sm-only-hide.