diff --git a/documentation/docs/attribute-selectors/show-hide.md b/documentation/docs/attribute-selectors/show-hide.md
index 943aafb..f843d12 100644
--- a/documentation/docs/attribute-selectors/show-hide.md
+++ b/documentation/docs/attribute-selectors/show-hide.md
@@ -29,7 +29,7 @@ what you wanted.
 ## Example
 
 ```html
-<div data-show-gt-sm>I will only be visible on screens wider than 969px.</div>
+<div data-show-gt-sm>I will only be visible on screens wider than 959px.</div>
 ```
 
 :::info
diff --git a/documentation/docs/class-selectors/show-hide.md b/documentation/docs/class-selectors/show-hide.md
index 7bef3b6..7c3fc4d 100644
--- a/documentation/docs/class-selectors/show-hide.md
+++ b/documentation/docs/class-selectors/show-hide.md
@@ -20,7 +20,7 @@ With `mediaQueryName` being the name of one of the [available media queries](../
 ## Example
 
 ```html
-<div class="show-gt-sm">I will only be visible on screens wider than 969px.</div>
+<div class="show-gt-sm">I will only be visible on screens wider than 959px.</div>
 ```
 
 :::info
diff --git a/documentation/docs/responsive.md b/documentation/docs/responsive.md
index 4507aa3..882676a 100644
--- a/documentation/docs/responsive.md
+++ b/documentation/docs/responsive.md
@@ -21,7 +21,7 @@ The fx-layout media queries use the following breakpoints:
 | Name | Breakpoint |
 |------|------------|
 | xs   | 599px      |
-| sm   | 969px      |
+| sm   | 959px      |
 | md   | 1279px     |
 | lg   | 1919px     |
 | xl   | 5000px     |
diff --git a/documentation/versioned_docs/version-3.0/attribute-selectors/show-hide.md b/documentation/versioned_docs/version-3.0/attribute-selectors/show-hide.md
index 943aafb..f843d12 100644
--- a/documentation/versioned_docs/version-3.0/attribute-selectors/show-hide.md
+++ b/documentation/versioned_docs/version-3.0/attribute-selectors/show-hide.md
@@ -29,7 +29,7 @@ what you wanted.
 ## Example
 
 ```html
-<div data-show-gt-sm>I will only be visible on screens wider than 969px.</div>
+<div data-show-gt-sm>I will only be visible on screens wider than 959px.</div>
 ```
 
 :::info
diff --git a/documentation/versioned_docs/version-3.0/class-selectors/show-hide.md b/documentation/versioned_docs/version-3.0/class-selectors/show-hide.md
index 7bef3b6..7c3fc4d 100644
--- a/documentation/versioned_docs/version-3.0/class-selectors/show-hide.md
+++ b/documentation/versioned_docs/version-3.0/class-selectors/show-hide.md
@@ -20,7 +20,7 @@ With `mediaQueryName` being the name of one of the [available media queries](../
 ## Example
 
 ```html
-<div class="show-gt-sm">I will only be visible on screens wider than 969px.</div>
+<div class="show-gt-sm">I will only be visible on screens wider than 959px.</div>
 ```
 
 :::info
diff --git a/documentation/versioned_docs/version-3.0/responsive.md b/documentation/versioned_docs/version-3.0/responsive.md
index 4507aa3..882676a 100644
--- a/documentation/versioned_docs/version-3.0/responsive.md
+++ b/documentation/versioned_docs/version-3.0/responsive.md
@@ -21,7 +21,7 @@ The fx-layout media queries use the following breakpoints:
 | Name | Breakpoint |
 |------|------------|
 | xs   | 599px      |
-| sm   | 969px      |
+| sm   | 959px      |
 | md   | 1279px     |
 | lg   | 1919px     |
 | xl   | 5000px     |
diff --git a/src/lib/mixins.scss b/src/lib/mixins.scss
index d9ddb57..0126590 100644
--- a/src/lib/mixins.scss
+++ b/src/lib/mixins.scss
@@ -88,7 +88,7 @@
 // Media Sizes
 // flex-layout breakpoints
 $xs: 599px;
-$sm: 969px;
+$sm: 959px;
 $md: 1279px;
 $lg: 1919px;
 $xl: 5000px;
diff --git a/test/media-sizes.spec.scss b/test/media-sizes.spec.scss
index d5ea4d9..2baca09 100644
--- a/test/media-sizes.spec.scss
+++ b/test/media-sizes.spec.scss
@@ -24,7 +24,7 @@
 				}
 			}
 			@include true.expect {
-				@media screen and (min-width: 600px) and (max-width: 969px) {
+				@media screen and (min-width: 600px) and (max-width: 959px) {
 					color: coral;
 				}
 			}
@@ -38,7 +38,7 @@
 				}
 			}
 			@include true.expect {
-				@media screen and (min-width: 970px) and (max-width: 1279px) {
+				@media screen and (min-width: 960px) and (max-width: 1279px) {
 					color: coral;
 				}
 			}
@@ -96,7 +96,7 @@
 				}
 			}
 			@include true.expect {
-				@media screen and (max-width: 969px) {
+				@media screen and (max-width: 959px) {
 					color: coral;
 				}
 			}
@@ -154,7 +154,7 @@
 				}
 			}
 			@include true.expect {
-				@media screen and (min-width: 970px) {
+				@media screen and (min-width: 960px) {
 					color: coral;
 				}
 			}