From eb7dccaae283b71c5925976b2a22307f64c8ed0e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 17 Aug 2022 20:15:22 +0530
Subject: [PATCH] fix: made web form skeleton responsive

---
 frappe/public/scss/website/web_form.scss        | 17 +++++++++++++++--
 .../web_form/templates/web_form_skeleton.html   | 12 ++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss
index e2f85b787e..c809d1e33f 100644
--- a/frappe/public/scss/website/web_form.scss
+++ b/frappe/public/scss/website/web_form.scss
@@ -117,11 +117,24 @@
 						.web-form-skeleton {
 							.box-group {
 								display: flex;
-								gap: 20px;
-								margin-bottom: 15px;
+								flex-wrap: wrap;
 
 								.box-container {
 									width: 100%;
+									padding: 0 var(--padding-sm);
+									margin-bottom: 15px;
+
+									&:first-child {
+										padding-left: 0;
+									}
+
+									&:last-child {
+										padding-right: 0;
+									}
+
+									@include media-breakpoint-down(xs) {
+										padding: 0;
+									}
 
 									.box {
 										background-color: var(--control-bg);
diff --git a/frappe/website/doctype/web_form/templates/web_form_skeleton.html b/frappe/website/doctype/web_form/templates/web_form_skeleton.html
index 82fb2bccac..299356cee6 100644
--- a/frappe/website/doctype/web_form/templates/web_form_skeleton.html
+++ b/frappe/website/doctype/web_form/templates/web_form_skeleton.html
@@ -1,10 +1,10 @@
 <div class="web-form-skeleton">
 	<div class="box-group">
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
@@ -16,21 +16,21 @@
 		</div>
 	</div>
 	<div class="box-group">
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
 	</div>
 	<div class="box-group">
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>