屏幕在1920X1080分辨率下工作正常，但在较低的分辨率下，例如1280X721，屏幕和UI正在被破坏和压缩。
我们如何解决这个问题使用css或什么是技术？我们如何保留它应该调整大小reso？。将不胜感激。谢谢。

分辨率或屏幕大小为1280x721

分辨率为1920x1080或屏幕大小为

html代码

<div id="settings-admin-page-container">
    <div class="page-content flex-column">
      <mat-card class="mb-18px tenant-mat-card-centered">
        <!-- <img class="map-pin custom-pin" src="{{mapMarkerIconSingleProperty}}" /> -->
        <div class="settings-admin-page-content-form-container">
          <div fxLayoutAlign="center"> 
            <span style="padding-top: 20px;padding-bottom:15px;" class="cofirmation-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_CONFIRMATION.label}}</span>
          </div>
          <div fxLayoutAlign="center"> 
            <span style="padding-top: 10px;padding-bottom:30px;" class="vendors-visit">Please confirm that you acknowledged our vendor’s visit between March 2, 2022 - March 7, 2022 Morning (8 AM - 12 PM). Thank you!</span>
          </div>
          <span style="padding-top: 24px;" class="procedure-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_Q1.label}}</span>
          <mat-form-field class="input-field-width" appearance="fill">
            <mat-label>{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_INPUT.label}}</mat-label>
              <textarea 
                name="A"
                matInput
                class="resize-none"
                [rows]="5"
                >
              </textarea>
            <mat-error>This is a required field.</mat-error>
          </mat-form-field>
          <span style="padding-top: 24px;" class="procedure-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_Q2.label}}</span>
        
          <mat-form-field class="input-field-width" appearance="fill">
            <mat-label>{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_INPUT.label}}</mat-label>
              <textarea 
              name="B"
              matInput
              class="resize-none"
              [rows]="5"
              >
            </textarea>
            <mat-error>This is a required field.</mat-error>
          </mat-form-field>
            <span style="padding-top: 24px;" class="procedure-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_Q3.label}}</span>
            <div style="margin-top:10px;">
              <span class="secondary-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_Q3.label2}}</span>
            </div>
        </div>
      </mat-card>
    </div>
  </div>

CSS代码

.tenant-mat-card-centered{
    margin-left: 565px;
    margin-right: 565px;
    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 1px 8px rgba(0, 0, 0, 0.12) !important;
  }

  .procedure-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.15px;
    color: rgba(0, 0, 0, 0.87);
  }

  .input-field-width {
    width: 100%;
    padding-top: 10px;
  }

  .secondary-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.15px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 30px;
    padding-bottom: 20px;
  }

  .user-card {
    margin-top:20px
  }

  .cofirmation-text{
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 143%;
    text-align: center;
    color: rgba(0, 0, 0, 0.87);
  }

  .vendors-visit {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    letter-spacing: 0.15px;
    color: rgba(0, 0, 0, 0.87)
  }

  .custom-pin {
    padding-top: 30px;
    width:150px;
  }