how do we adjust the layout on different screen sizes?

Issue

The screen is working fine on a 1920x1080 resolution but on a lower reso for example 1280x721 the screens and UI is being destroyed and compressed.

How do we solve this using css or what is the technique ? how do we retain that it should adjust on small and large reso ?. Would be appreciated. Thanks.

#In a 1280x721 resolution or screen size

#In 1920x1080 resolution or screen size

#html code

<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-code

 .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;
  }

Solution

Media queries are exactly what you need, just as the other contributors have provided. But when working with media queries, make sure you have the appropriate HTML tag to actually get them working:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag essentially tells the browser how to scale your content, giving the content the ability to fit and grow/shrink with the page size.

Answered By - Austin Caron