Layout Broken on Small Devices In Angular

Question

I am using Angular Material and Angular Flex-Layout in my Angular application and I have a problem on displaying the texts on mobile devices. As you can see on small scree, the labels there are cut. How would i display it not being cut or I think the other column should stack below if on mobile devices? Check this pic below for the current output. Also is there an efficient way to iterate labels and values without to put many divs in html?

HTML

<mat-card-content fxLayout="row" fxLayoutAlign="stretch">
  <mat-grid-list cols="6" rowHeight="28px">
    <mat-grid-tile [colspan]="1" [rowspan]="4">
      <div>
        <div class="details" *ngFor="let label of labels">
          <label><strong>{{ label.name }}</strong></label>
        </div>
      </div>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="2" [rowspan]="4">
      <div>
        <div class="details">
          <label>1</label>
        </div>

        <div class="details">
          <label>Robert Williams</label>
        </div>

        <div class="details">
          <label>robert@gmail.com</label>
        </div>

        <div class="details">
          <label>Human Resource</label>
        </div>
      </div>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="1" [rowspan]="4">
      <div>
        <div class="details" *ngFor="let label of labels2">
          <label><strong>{{ label.name }}</strong></label>
        </div>
      </div>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="2" [rowspan]="4">
      <div>
        <div class="details">
          <label>9178384567</label>
        </div>

        <div class="details">
          <label>Phoenix</label>
        </div>

        <div class="details">
          <label>Male</label>
        </div>

        <div class="details">
          <label>Aug 21, 2019</label>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</mat-card-content>

Answer 1

Here is a fully responsive solution;

  <mat-card-content fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start stretch">
    <div fxLayout="row">
      <div fxLayout="column" fxFlex.xs="50%">
        <div fxFlex="25%" class="details" *ngFor="let label of labels">
          <label><strong>{{ label }}</strong></label>
        </div>
      </div>

      <div fxLayout="column" fxFlex.xs="50%">
        <div fxFlex="25%" class="details">
          <label>1</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Robert Williams</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>robert@gmail.com</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Human Resource</label>
        </div>
      </div>
    </div>

    <div fxLayout="row">
      <div fxLayout="column" fxFlex.xs="50%">
        <div fxFlex="25%" class="details" *ngFor="let label of labels2">
          <label><strong>{{ label }}</strong></label>
        </div>
      </div>

      <div fxLayout="column" fxFlex.xs="50%">
        <div fxFlex="25%" class="details">
          <label>9178384567</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Phoenix</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Male</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Aug 21, 2019</label>
        </div>
      </div>
    </div>
  </mat-card-content>

also i suggest adding following style to properly break text in very small screens

.details > label {
  overflow-wrap: break-word;
}

Here is a working demo: https://stackblitz.com/edit/angular-ivy-9vpkl1

UPDATE

In order to have a more compact template create an array that holds labels and data together

  datas = [
    {label: "ID", text: "1"},
    {label: "Mobile", text: "9178384567"},
    {label: "Full Name", text: "Robert Williams"},
    {label: "City", text: "Phoenix"},
    {label: "Email", text: "robert@gmail.com"},
    {label: "Gender", text: "Male"},
    {label: "Department", text: "Human Resource"},
    {label: "Hire Date", text: "Aug 21, 2019"},
  ]

<mat-card-content fxLayout="row wrap" fxLayoutAlign="start stretch">
  <div fxFlex="50%" fxFlex.xs="100%" fxLayout="row" *ngFor="let data of datas">
    <div fxFlex="50%" class="details">
      <label><strong>{{data.label}}</strong></label>
    </div>
    <div fxFlex="50%" class="details">
      <label>{{data.text}}</label>
    </div>
  </div>
</mat-card-content>

Demo: https://stackblitz.com/edit/angular-ivy-g9vt6h

I hope it helps.