Styling: ResponsivePrefixes

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.