<div fxFlex="fill" fxLayout="column">
  <h2>Go to research activity filters</h2>

  <div class="flex-hack" fxFlex="grow" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="center center" fxLayoutAlign.lt-lg="">
    <div fxFlex.lt-lg="100%">
      <mat-chip-list class="mat-chip-list-stacked">
        <mat-chip *ngFor="let activity of researchActivities" [style.backgroundColor]="activity.color" [routerLink]="['/search']" [queryParams]="{ researchActivities: [activity.id], searchText: '', category: 'all'}">
          {{activity.name}}
        </mat-chip>
      </mat-chip-list>
    </div>

    <div fxHide.lt-lg fxFlex.gt-xs="50%" fxFlex.xs="100%">
      <img id="img-wheel" src="/assets/images/research-activity-diagram.svg"  style="margin-left:20%;">
    </div>
  </div>
</div>

<div fxFlex="fill" fxLayout="column">
  <h2>Go to research activity filters</h2>

  <div class="flex-hack" fxFlex="grow" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="center center" fxLayoutAlign.lt-lg="">
    <div fxFlex.lt-lg="100%">
      <mat-chip-list class.lt-md="mat-chip-list-stacked">
        <mat-chip *ngFor="let activity of researchActivities" [style.backgroundColor]="activity.color" [routerLink]="['/search']" [queryParams]="{ researchActivities: [activity.id], searchText: '', category: 'all'}">
          {{activity.name}}
        </mat-chip>
      </mat-chip-list>
    </div>

    <!--<div fxHide.lt-lg fxFlex.gt-xs="50%" fxFlex.xs="100%">-->
      <!--<img id="img-wheel" src="/assets/images/research-activity-diagram.svg"  style="margin-left:20%;">-->
    <!--</div>-->
  </div>
</div>

Comment out research lifecycle image
Comment out research lifecycle image
