Fix: zigzag direction on mobile [TMZ-289](#155)

elementor · Jan 8, 2025 · 196c8be · 196c8be
1 parent 8d8bb4d
commit 196c8be
Showing 1 changed file with 33 additions and 31 deletions.
diff --git a/modules/content/assets/scss/hello-plus-zigzag.scss b/modules/content/assets/scss/hello-plus-zigzag.scss
@@ -138,36 +138,6 @@
 		}
 	}
 
-	&.has-direction {
-		&-start {
-			.ehp-zigzag__item-wrapper:nth-child(odd) {
-				.ehp-zigzag__item-container {
-					flex-direction: row;
-				}
-			}
-
-			.ehp-zigzag__item-wrapper:nth-child(even) {
-				.ehp-zigzag__item-container {
-					flex-direction: row-reverse;
-				}
-			}
-		}
-
-		&-end {
-			.ehp-zigzag__item-wrapper:nth-child(odd) {
-				.ehp-zigzag__item-container {
-					flex-direction: row-reverse;
-				}
-			}
-
-			.ehp-zigzag__item-wrapper:nth-child(even) {
-				.ehp-zigzag__item-container {
-					flex-direction: row;
-				}
-			}
-		}
-	}
-
 	&__text-container {
 		display: flex;
 		flex-direction: column;
@@ -278,12 +248,44 @@
 		}
 	}
 
+	@media screen and (min-width: $screen-desktop-min) {
+		&.has-direction {
+			&-start {
+				.ehp-zigzag__item-wrapper:nth-child(odd) {
+					.ehp-zigzag__item-container {
+						flex-direction: row;
+					}
+				}
+
+				.ehp-zigzag__item-wrapper:nth-child(even) {
+					.ehp-zigzag__item-container {
+						flex-direction: row-reverse;
+					}
+				}
+			}
+
+			&-end {
+				.ehp-zigzag__item-wrapper:nth-child(odd) {
+					.ehp-zigzag__item-container {
+						flex-direction: row-reverse;
+					}
+				}
+
+				.ehp-zigzag__item-wrapper:nth-child(even) {
+					.ehp-zigzag__item-container {
+						flex-direction: row;
+					}
+				}
+			}
+		}
+	}
+
 	@media screen and (max-width: $screen-tablet-max) {
 		.ehp-zigzag__item-container {
 			flex-direction: column;
 		}
 
-		&.has-direction-right {
+		&.has-direction-end {
 
 			.ehp-zigzag__graphic-element-container {
 				order: 2;