0.0.225 upd mobile_styles.css

static/css/mobile_styles.css

@@ -4,7 +4,15 @@
 @media (max-width: 1199px){
     .benefit_img_about_service>figure>img{
         width: 173px;
-    }
+        }
+
+        .type_of_subscribes{
+        align-items: center;
+        }
+        .container_subscribe{
+                margin: 20px 16px;
+                width: 42%;
+        }
 }
 @media (max-width: 1064px){
    .header_logo, .header_btn_mover, .header_btn_sender{
@@ -118,6 +126,10 @@
          width: 100%;
      }
 
+     .subscribe_inf_right_part{
+         width: 38%;
+     }
+
     .button_profile_header{
         display: none;
     }
@@ -183,6 +195,10 @@
         line-height: 42px;
     }
 
+    .subscribe_inf_left_part{
+        width: 50%;
+    }
+
 
     details{
         width: 100%;
@@ -409,19 +425,14 @@
     width: 32%;
 }
 
-    .type_of_subscribes{
+
-        flex-direction: column;
-        align-items: center;
-    }
 
     .subscribes_container{
         width: 100%;
     }
 
-    .container_subscribe{
+
-        margin: 20px 16px;
+
-        width: unset;
-    }
 
     .first-decr-subscribe{
         width: 55%;
@@ -763,9 +774,12 @@
     .left-part-carrier-card, .inf_carrier_container{
         width: unset;
         float: none;
-
+        }
+    .inf_carrier_container{
+        padding-top: 70px;
     }
 
+
     .carrier-card>.clear_both{
         clear: unset;
     }
@@ -846,6 +860,13 @@
         font-size: 12px;
 
     }
+
+    /*.phones_carrier{*/
+    /*    display: inline-block;*/
+    /*}*/
+    /*.phones_carrier>.inf_carrier_icon{*/
+    /*    width: 100%;*/
+    /*}*/
 /* END   my_routes*/
 
 /*    support*/
@@ -872,8 +893,8 @@
 /*    subscribe*/
 
     .b_another_subscribes{
-        max-width: 272px;
+        width: 100%;
-        margin: auto;
+
     }
     .state_subscribe, .state_subscribe > a{
         font-size: 14px;
@@ -882,17 +903,10 @@
         line-height: 20px;
     }
 
-     .subscribe_inf{
-        max-width: 260px;
-        margin: auto;
-    }
 
 
-    .subscribe_inf_left_part{
+
-        width: 100%;
+
-        float: none;
-        margin: 10px auto;
-    }
     .label_toggle_switch_cont{
         width: 92%;
     }
@@ -923,10 +937,7 @@
         line-height: 20px;
     }
 
-    .subscribe_inf_right_part{
+
-        width: 100%;
-        float: none;
-    }
 
     .title_options{
         font-size: 18px;
@@ -940,11 +951,11 @@
         font-weight: 400;
         line-height: 20px;
         margin: 20px auto;
-        width: 262px;
+        width: 100%;
 
     }
     .another_subscribe{
-        width: 102%;
+        width: 100%;
         height: unset;
         flex-direction: column;
         margin: 20px auto;
@@ -989,7 +1000,7 @@
             margin: 2.5% 0.5% 0.5% 0.5%;
     }
     .wrapper_switch_cont{
-        max-width: 245px;
+        width: 100%;
     }
 
     #customer>.text_btn_profile{
@@ -1009,6 +1020,34 @@
 
 /*    */
 
+}
+@media (max-width: 847px){
+     .container_subscribe{
+        margin: 20px 16px;
+        width: unset;
+    }
+    .type_of_subscribes{
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .input_toggle_switch_display{
+        width: 26px;
+    }
+    .label_toggle_switch_cont{
+        width: 88%;
+    }
+
+    .toggle_switch_cont{
+        margin-top: 6px;
+        width: 12%;
+    }
+     .carrier_inf_moving.left{
+        width: 46%;
+    }
+    .carrier_inf_moving.right{
+        width: 37%;
+    }
 }
 @media (max-width: 828px){
     .to_address_point_txt.find_route {
@@ -1017,6 +1056,7 @@
     .from_address_point_txt.find_route.first {
         width: 54.1%;
     }
+
 }
 @media (max-width: 776px){
 
@@ -1033,6 +1073,8 @@
 
     }
 
+
+
 }
 @media (max-width: 699px){
     .block_overlay.show{
@@ -1074,6 +1116,12 @@
     .info_profile{
         width: 100%;
     }
+
+    .another_subscribe{
+        padding: 10px 10px 0 10px;
+        flex-direction: unset;
+        justify-content: space-evenly;
+    }
 }
 @media (max-width: 687px){
     .to_address_point_txt.find_route {
@@ -1082,8 +1130,29 @@
     .from_address_point_txt.find_route.first {
         width: 52.1%;
     }
+
+     .subscribe_inf{
+        width: 95%;
+    }
+     .subscribe_inf_right_part{
+        width: 100%;
+        float: none;
+    }
+     .subscribe_inf_left_part{
+        width: 100%;
+        float: none;
+        margin: 10px auto;
+    }
+
+     .wrapper_switch_cont>.width-100{
+         display: inline-block;
+     }
+
+
+
+
 }
-@media (max-width: 575px){
+@media (max-width: 575px)   {
 
     #how_it_work_b{
         width: 100%;
@@ -1124,19 +1193,29 @@
     .from_address_point_txt.find_route.first {
         width: 51.1%;
     }
-}
+    .another_subscribe{
-@media (max-width: 440px){
+            padding: unset;
-    .container_inp_w_abr{
+            flex-direction: column;
-        width: 99%;
+            justify-content: unset;
     }
+}
 
+@media (max-width: 466px) {
     .to_address_point_txt.find_route {
         width: 48.4%;
     }
+
     .from_address_point_txt.find_route.first {
         width: 47.95%;
     }
+
+
+    .container_inp_w_abr {
+        width: 99%;
+    }
+
 }
+
 @media (max-width: 440px){
     .benefit_img_about_service {
      flex-direction: column;

static/css/styles.css

@@ -1825,7 +1825,7 @@ input#id_extra_phone
 button#edit_route {
   display: block;
   height: 44px;
-  width: 98%;
+  width: 100%;
   background: #FF613A;
   color: #FFF;
   font-family: Inter;
@@ -1840,7 +1840,9 @@ button#edit_route {
 }
 
 .button_remove_route {
-  display: inline-block;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
 }
 
 
@@ -1849,7 +1851,7 @@ button#remove_route {
   width: 285px;
 }
 button.confirm_remove{
-    width: 49% !important;
+    width: 49.5%;
     border: 1px solid #ff0000a8;
     border-radius: 10px;
     color: #ff0000a8;
@@ -1858,10 +1860,11 @@ button.confirm_remove{
     margin-right: 3px;
     /*padding: 5px 0px 5px 0px;*/
     font-size: 16px;
+    height: 44px;
 }
 
 button.cancel_remove{
-    width: 48%;
+    width: 49.5%;
     border: 1px solid #808080cc;
     border-radius: 10px;
     color: #808080cc;
@@ -1869,6 +1872,7 @@ button.cancel_remove{
     font-weight: 600;
     /*padding: 5px 0px 5px 0px;*/
     font-size: 16px;
+    height: 44px;
 
 }