diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts
index 0ba83a4f5b20..3a354340fe87 100644
--- a/packages/main/src/Form.ts
+++ b/packages/main/src/Form.ts
@@ -97,10 +97,10 @@ type ItemsInfo = {
  *
  * The Form component reacts and changes its layout on predefined breakpoints.
  * Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:
- * - **S** (< 600px) – 1 column is recommended (default: 1)
- * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)
- * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)
- * - **XL** (> 1439px) – up to 6 columns are recommended (default: 3)
+ * - **S** (0 - 599px) – 1 column is recommended (default: 1)
+ * - **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)
+ * - **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)
+ * - **XL** (>= 1440px) – up to 6 columns are recommended (default: 3)
  *
  * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
  *
@@ -687,10 +687,10 @@ class Form extends UI5Element {
 				containerQuery = `@container (max-width: 599px) {`;
 			} else if (step === "M") {
 				supporedColumnsNumber = StepColumn.M;
-				containerQuery = `@container (width > 599px) and (width < 1024px) {`;
+				containerQuery = `@container (min-width: 600px) and (max-width: 1023px) {`;
 			} else if (step === "L") {
 				supporedColumnsNumber = StepColumn.L;
-				containerQuery = `@container (width > 1023px) and (width < 1439px) {`;
+				containerQuery = `@container (min-width: 1024px) and (max-width: 1439px) {`;
 			} else if (step === "XL") {
 				containerQuery = `@container (min-width: 1440px) {`;
 				supporedColumnsNumber = StepColumn.XL;
diff --git a/packages/main/src/themes/FormItemSpan.css b/packages/main/src/themes/FormItemSpan.css
index c6bb111fcc11..8d01d50d09ec 100644
--- a/packages/main/src/themes/FormItemSpan.css
+++ b/packages/main/src/themes/FormItemSpan.css
@@ -11,7 +11,7 @@
 	--ui5-form-item-label-padding-internal: 0.625rem 0.25rem 0 0.25rem;
 }
 
-@container (max-width: 600px) {
+@container (max-width: 599px) {
 	.ui5-form-item,
 	.ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-S);
@@ -24,7 +24,7 @@
 	}
 }
 
-@container (width > 600px) and (width <= 1024px) {
+@container (min-width: 600px) and (max-width: 1023px) {
 	.ui5-form-item,
 	.ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-M);
@@ -37,7 +37,7 @@
 	}
 }
 
-@container (width > 1024px) and (width <= 1440px) {
+@container (min-width: 1024px) and (max-width: 1439px) {
 	.ui5-form-item,
 	.ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-L);
@@ -50,7 +50,7 @@
 	}
 }
 
-@container (min-width: 1441px) {
+@container (min-width: 1440px) {
 	.ui5-form-item,
 	.ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-XL);
diff --git a/packages/main/src/themes/FormLayout.css b/packages/main/src/themes/FormLayout.css
index 30357addeab0..9280b7b969fa 100644
--- a/packages/main/src/themes/FormLayout.css
+++ b/packages/main/src/themes/FormLayout.css
@@ -7,7 +7,7 @@
 */
 
 /* S - 1 column */
-@container (max-width: 600px) {
+@container (max-width: 599px) {
 	.ui5-form-layout {
 		grid-template-columns: 1fr;
 	}
@@ -21,7 +21,7 @@
 }
 
 /* M  - 1 column by default, up to 2 columns */
-@container (width > 600px) and (width <= 1024px) {
+@container (min-width: 600px) and (max-width: 1023px) {
 	.ui5-form-layout {
 		grid-template-columns: 1fr;
 	}
@@ -42,7 +42,7 @@
 }
 
 /* L - 2 columns by default, up to 3 columns */
-@container (width > 1024px) and (width <= 1440px) {
+@container (min-width: 1024px) and (max-width: 1439px) {
 
 	.ui5-form-layout {
 		grid-template-columns: repeat(2, 1fr);
@@ -77,7 +77,7 @@
 }
 
 /* XL - 3 columns by default, up to 6 */
-@container (min-width: 1441px) {
+@container (min-width: 1440px) {
 	.ui5-form-layout {
 		grid-template-columns: repeat(3, 1fr);
 	}