diff --git a/public/css/app.css b/public/css/app.css
index 0f477b5a2..1898cb3f9 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1592,6 +1592,17 @@ button, input, optgroup, select, textarea{
         margin-left: unset !important;
     }
 
+/* width of container, custom choose */
+
+@media (min-width: 640px){
+
+  [custom-half]{
+    grid-column: span 3 / span 3 !important;
+  }
+}
+
+/* width of container, custom choose */
+
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
diff --git a/resources/assets/js/views/settings/settings.js b/resources/assets/js/views/settings/settings.js
index 05126a72e..acbd6d93e 100644
--- a/resources/assets/js/views/settings/settings.js
+++ b/resources/assets/js/views/settings/settings.js
@@ -142,13 +142,11 @@ const app = new Vue({
         },
 
         onSmallWidthColumn(item) {
-            this.$refs[item].$el.classList.remove('sm:col-span-6');
-            this.$refs[item].$el.classList.add('sm:col-span-3');
+            this.$refs[item].$el.setAttribute('custom-half', true);
         },
 
         onFullWidthColumn(item) {
-            this.$refs[item].$el.classList.add('sm:col-span-6');
-            this.$refs[item].$el.classList.remove('sm:col-span-3');
+            this.$refs[item].$el.removeAttribute('custom-half');
         },
 
         settingsInvoice() {
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 4a8f6dd02..30b904ec7 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -239,6 +239,12 @@
     #button-monthly {
         margin-left: unset !important;
     }
+
+    /* width of container, custom choose */
+    [custom-half] {
+        @apply sm:col-span-3 !important;
+    }
+    /* width of container, custom choose */
 }
 
 /* menu */