From ad17ec5ccad3ceffd383f228d4529438b5a3b9a6 Mon Sep 17 00:00:00 2001
From: niu tech <jerzyglowacki@gmail.com>
Date: Fri, 12 Nov 2021 23:52:58 +0100
Subject: Adjust number of columns for Split Mode (#2208)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
---
 src/styles/services.scss | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

(limited to 'src/styles/services.scss')

diff --git a/src/styles/services.scss b/src/styles/services.scss
index dd053e93d..cedfcbdd1 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -18,21 +18,35 @@
   }
 }
 
-.mode__split .services {
-  display: flex;
-  overflow: visible;
-
-  .services__webview {
-    position: relative;
-    flex: 1 0 50%;
+.mode__split {
+  .services {
+    display: flex;
+    overflow: visible;
 
-    @media (min-width: 1280px) {
-      flex-basis: 33.33%;
+    .services__webview {
+      position: relative;
+      flex: 1 0 33.33%;
     }
+  }
 
-    @media (min-width: 2048px) {
-      flex-basis: 25%;
-    }
+  &[data-columns="1"] .services .services__webview {
+    flex-basis: 100%;
+  }
+
+  &[data-columns="2"] .services .services__webview {
+    flex-basis: 50%;
+  }
+
+  &[data-columns="3"] .services .services__webview {
+    flex-basis: 33.33%;
+  }
+
+  &[data-columns="4"] .services .services__webview {
+    flex-basis: 25%;
+  }
+
+  &[data-columns="5"] .services .services__webview {
+    flex-basis: 20%;
   }
 }
 
-- 
cgit v1.2.3-70-g09d2