ریسپانسیو وب

سلام.
دقیقا متوجه منظورتون نشدم اگر میشه عکس بدین تا متوجه بشم.

از چه کدی برای چینش صفحه استفاده کردی(flex، grid، float و...)؟
و از چه واحدی برای اندازه استفاده کردی؟(px، em، vh و...)
کد های مربوط به اون بخش رو هم بفرست بررسی کنیم

عکس اول

عکس دوم

عکس سوم

زمانی که کیبرد میاد بالا صفحه بهم میریزه ولی به عنوان مثال وقتی توی راکت تست میکنم کیبرد میاد بالا انگار position = absolute شده و صفحه بهم نمیریزه

فکر کنم مشکل از سایزیه که به اون فرم دادی. از چه واحدی برای سایزش(طول و عرض فرم یا div) استفاده کردی؟
کد ها رو هم بفرست

<div class="page">
  <div class="content">
    <div class="detail">
      <div class="square"></div>
      <div class="triangle-up"></div>
      <div class="triangle-down"></div>
      <div class="circle-symbole"></div>
      <div class="maininfo">
        <div class="item image-box">
          <img src="../../../../assets/images/icons/LogoW.png" loading="lazy" class="app-logo" alt="sepidz company dark logo" />
        </div>
        <div class="versioninfo">
          <div class="title">
            {{'General.Sepidz' | translate}}
          </div>
          <div class="light">
            {{'General.Version' | translate}} {{currentInformation?.ProductVersion | persianNumber}}
          </div>
          <div class="light">
            {{ today | persianNumber }}
          </div>
        </div>
        <div class="item footer-box">
          <span> {{'General.CustomerCode' | translate}}</span>
          <strong>{{currentInformation?.LockNumber | persianNumber}} </strong>
        </div>
      </div>
    </div>
    <div class="users">
      <div>
        <img class="sepidz-icon" src="../../../../assets/images/icons/icon384.png">
      </div>
      <div class="header-title">راهکارهای نرم افزار رستوران</div>
      <div class="virtualbox">
        <div class="virtual"><i class="icon-instagram1"></i></div>
        <div class="virtual"><i class="icon-globe"></i></div>
        <div class="virtual"><i class="icon-call-o"></i></div>
      </div>
      <form [formGroup]="group" (ngSubmit)="login()" aria-labelledby="title" class="frm-login">

        <div class="loginbox">
          <div class="item">
            <ssg-select name="BranchId"
                        defaultHeight="50" 
                        autofocus
                        autocomplete="off"
                        [group]="group"
                        textFieldName="Title"
                        apiName="Branch/ReadLookUp"
                        [required]="true"
                        valueFieldName="Id"
                        (valueChange)="onChanged($event?.Id)"
                        (valueClear)="onClear()"
                        [label]="'General.Branch' | translate"></ssg-select>
          </div>
          <div class="item">
            <ssg-select name="Id"
                        #user
                        [defaultHeight]="50"
                        [group]="group"
                        textFieldName="DisplayName"
                        [required]="true"
                        valueFieldName="Id"
                        [dataList]="branchFilterUser"
                        [label]="'General.User' | translate"></ssg-select>
          </div>
          <div class="item custom">
            <ssg-input icon="icon-unlock-alt"
                       [group]="group"
                       [defaultHeight]="50"
                       [required]="true"
                       name="Password"
                       (valueChange)="onChanged2($event)"
                       textType="password"
                       autocomplete="off"
                       [minLength]="6"
                       [label]="'General.Password' | translate">
            </ssg-input>
          </div>
        </div>
        <div class="footer">

          <div class="rememberbox">
          </div>
          <div class="btnbox">
            <ssg-button [disabled]="!group?.valid || isLoading"
                        class="login-btn"
                        icon="icon-login-o"
                        [label]="'General.SubmitLogin' | translate"
                        buttontype="submit"
                        appearance="flat"></ssg-button>
          </div>
        </div>
      </form>
    </div>
  </div>

</div>

i{
  line-height: 0 !important;
}
.page{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-primary);
  .content{
    width: 90%;
    height: 70%;
    box-shadow: 0 1px 3px #0003, 0 2px 2px #0000001f, 0 0 2px #00000024;
    display: flex;
    border-radius: 30px;
    //-----------------------Detail
    .detail{
      width: 40%;
      background-color: #25a59a;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--color-text-light);
      font-weight: 300;
      overflow: hidden;
      position: relative;
      .circle-symbole{
        position: absolute;
        height: 60px;
        width: 60px;
        background-color: #34afa3;
        border-radius: 50%;
        left: 10%;
        top: 80%;
      }
      .triangle-down{
        position: absolute;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 130px solid #34afa3;
        right: 20%;
        top: 87%;
        transform: rotate(340deg);
      }
      .triangle-up{
        position: absolute;
        width: 0;
        height: 0;
        border-left: 10rem solid transparent;
        border-right: 10rem solid transparent;
        border-top: 20rem solid #34afa3;
        right: 0;
        bottom: 70%;
        transform: rotate(90deg);
      }
      .square{
        position: absolute;
        height: 35px;
        width: 35px;
        right: 0;
        bottom: 40%;
        background-color: #34afa3;
        transform: rotate(45deg);
      }
      .maininfo{
        height: 75%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
          .app-logo{
            width: 80%;
          }
          .title{
            margin-bottom: 1.5vmin;
          }
          .footer-box{
            border: 1px solid var(--color-border-light);
            padding: 1vmin 2vmin;
            border-radius: 30px;
            width: 13rem;
          }
      }
      }
      //-----------------------USERS-------------
    .users{
      width: 100%;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      background-color: var(--bg-light);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      .sepidz-icon{
        width: 15%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .header-title{
        font-size: 1.5rem;
        color: #25a59a;
        text-shadow: 1px 1px 2px #25a59a;
      }
      .virtualbox{
        display: none;
        .virtual{
          width: 3.5rem;
          height: 3.5rem;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid var(--color-border-secondary-2);
          font-size: 1.7rem;
          margin: 2vmin 0.2vmin;
          background-color: var(--bg-primary-4);
          color: var(--color-text-Thirdary);
          cursor: pointer;
          &:hover{
            background-color: #25a59a;
            color: var(--color-text-light);
            border: 1px solid #25a59a;
            transition: background-color 0.3s;
          }
        }
      }

      .frm-login{
        width: 90%;
      }
      .btnbox{
        display: flex;
        justify-content: center;
        .login-btn{
          background-color: #25a59a;
          color: var(--color-text-light) !important;
          height: 45px;
          border-radius: 30px;
          width: 13rem;
          justify-content: center;
          display: flex;
          margin-top: 3vmin;      
        }
      }
    }
  }
}

:host ::ng-deep .ng-select.custom{
  background-color: var(--bg-primary-4) !important;
}
:host ::ng-deep .textinput{
  background-color: var(--bg-primary-4) !important;
}

 @media screen and (max-width : 992px){
   .header-title{
     margin-bottom: 5rem;
   }
    .users{
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
   }
 }
 @media screen and (min-width : 993px){
  .content{
    width: 70% !important;
    .detail{
     display: flex !important;
   }
   .users{
     width: 60% !important;
     .virtualbox{
       display: flex !important;
     }
     .frm-login{
       width: 50% !important;
     }
   }
  }

}
@media screen and (min-width : 1700px){
  .content{
    width: 55% !important;
    height: 65% !important;
  }
}

عکس ها موجوده