diff --git a/assets/main.scss b/assets/main.scss
index 31c8153..2923943 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -72,7 +72,7 @@ body {
     }
 
     &.toggle_visible {
-        @apply max-xl:flex max-xl:flex-col max-xl:text-center;
+        @apply max-xl:flex max-xl:flex-col max-xl:text-left;
 
         a {
             @apply max-xl:mb-2;
@@ -216,7 +216,7 @@ a[href^="#"] {
     }
 
     &-title {
-        @apply col-span-4 font-bold text-lg text-end mt-4;
+        @apply col-span-4 font-bold text-lg text-end xl:mt-4 mb-4 xl:mb-0;
     }
 }
 
@@ -285,7 +285,7 @@ button {
     }
 
     &-item {
-        @apply flex flex-row gap-4 items-center justify-center flex-wrap xl:flex-nowrap;
+        @apply flex flex-row gap-4 items-center justify-start xl:justify-center flex-wrap xl:flex-nowrap;
 
         label {
             @apply w-full xl:w-auto;
@@ -302,6 +302,10 @@ button {
         &_checkbox {
             @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap
         }
+
+        input[type=range] {
+            @apply min-w-[calc(100%-8rem)] xl:min-w-min;
+        }
     }
 }
 
diff --git a/components/calcValues.vue b/components/calcValues.vue
index b8abffd..e317ab0 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -151,13 +151,13 @@ const goal = (target: string, params: object) => {
                     <div class="form-item w-full">
                         <label for="length">Длина ламельного блока, мм</label>
                         <input disabled :value="`${form_state.length} мм`" class="w-28" />
-                        <input id="length" type="range" class="w-full" v-bind="parametric.length"
+                        <input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
                             v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
                     </div>
                     <div class="form-item w-full">
                         <label for="height">Высота забора, мм</label>
                         <input disabled :value="`${form_state.height} мм`" class="w-28" />
-                        <input id="height" type="range" class="w-full" v-bind="parametric.height"
+                        <input id="height" type="range" class="xl:w-full" v-bind="parametric.height"
                             v-model="form_state.height" :ref="form_refs.height" />
                     </div>
                 </div>
@@ -208,30 +208,30 @@ const goal = (target: string, params: object) => {
                     <div class="grid grid-cols-6">
                         <div class="col-span-4 calc_table-maincell">Секции</div>
                         <div class="col-span-2 calc_table-maincell">{{ section_count }}</div>
-                        <div class="col-span-4">
+                        <div class="col-span-6 xl:col-span-4">
                             Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
                         </div>
-                        <div class="col-span-1">{{ section_count * lamelles_count }}</div>
-                        <div class="col-span-1">
+                        <div class="col-span-3 xl:col-span-1">{{ section_count * lamelles_count }}</div>
+                        <div class="col-span-3 xl:col-span-1">
                             {{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div>
                         <template v-if="!form_state.remove_pillar">
-                            <div class="col-span-4">Столбы, RAL {{ pillar_color }}, {{
+                            <div class="col-span-6 xl:col-span-4">Столбы, RAL {{ pillar_color }}, {{
                                 getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
-                            <div class="col-span-1">
+                            <div class="col-span-3 xl:col-span-1">
                                 {{ section_count + ~~(!!form_state.extra_section) + 1 }}
                             </div>
-                            <div class="col-span-1">
+                            <div class="col-span-3 xl:col-span-1">
                                 {{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
                             </div>
                         </template>
                         <template v-if="form_state.extra_section">
                             <div class="col-span-4 calc_table-maincell">Секции</div>
                             <div class="col-span-2 calc_table-maincell">1</div>
-                            <div class="col-span-4">
+                            <div class="col-span-6 xl:col-span-4">
                                 Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
                             </div>
-                            <div class="col-span-1">{{ 1 * lamelles_count }}</div>
-                            <div class="col-span-1">{{
+                            <div class="col-span-3 xl:col-span-1">{{ 1 * lamelles_count }}</div>
+                            <div class="col-span-3 xl:col-span-1">{{
                                 `${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div>
                         </template>
                     </div>