dupa.html

<div layout-gt-xs="row">

  <!-- first column -->

  <div class="md-padding" flex-gt-xs="15" fxHide.gt-sm>

dupa

  </div>

  <!-- second column -->

  <div class="md-padding" flex-gt-xs="70">


  </div>
  <div class="md-padding" flex-gt-xs="15" fxHide.gt-sm>
dupa

  </div>

</div>

gallery.component.html

<div fxLayout="row" fxLayoutAlign="space-around stretch" fxLayoutWrap fxFlex>
    <div class="image-thumb" *ngFor="let image of images" fxFlex.xs="90" fxFlex.sm="50" fxFlex.md="40" fxFlex.lg="30" fxFlex.xl="20" fxFlex="10">
    </div>
    <div class="image-thumb" *ngFor="let image of images" fxFlex="20" fxFlex.sm="45" fxFlex.xs="90">
        <md-card>
            <img md-card-image src="assets/optimized/images-square/{{ image.imgname }}.jpg" alt="{{ image.title }}">

        </md-card>
        <md-card>

            <p md-line>{{ image.title }}, {{ image.year }}</p>
            <span md-line>{{ image.name }}</span>
            <button md-icon-button (click)="showDetails(image);sidenav.open()">
                <md-icon>info</md-icon>
            </button>
        </md-card>

    </div>
</div>


<!--<md-card color="primary" *ngFor="let image of images | async">
    <img src="assets/optimized/images-square/{{ image.imgname }}.jpg" alt="{{ image.title }}">
    <md-card-content>
      <h3 md-line>{{ image.title }}, {{ image.year }}</h3>
      <span md-line>{{ image.name }}</span>
    </md-card-content>
    <md-card-actions>
      <button md-icon-button (click)="showDetails(image);sidenav.open()">
                <md-icon>info</md-icon>
            </button>
    </md-card-actions>
  </md-card>-->

<!--<div *ngFor="let list of images" fxFlex>
        <img src="assets/optimized/images-square/{{ image.imgname }}.jpg" alt="{{ image.title }}">
    </div>-->

<!--<div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxLayoutWrap fxLayoutGap="2vw" fxFlex>-->




<!--<div *ngFor="let image of images" fxFlex="30">
        <md-card>
            <img md-card-image src="assets/optimized/images-square/{{ image.imgname }}.jpg" alt="{{ image.title }}">
            <md-card-footer>
                <button md-button (click)="showDetails(image);sidenav.open()">

                <p md-line>{{ image.title }}</p>
                <p md-line>{{ image.year }}
                <span><md-icon>info</md-icon>
                  </span></p>
            </button>
            </md-card-footer>
        </md-card>

    </div>-->




<!--<md-grid-list cols="6" gutterSize="1em">
        <md-grid-tile *ngFor="let image of images | async">
            <img src="assets/optimized/images-square/{{ image.imgname }}.jpg" alt="{{ image.title }}">
            <md-grid-tile-footer>
                <h3 md-line>{{ image.title }}, {{ image.year }}</h3>
        <span md-line>{{ image.name }}</span>
                <button md-icon-button (click)="showDetails(image);sidenav.open()">
                <md-icon>info</md-icon>
            </button>
            </md-grid-tile-footer>
        </md-grid-tile>
    </md-grid-list>-->

md-grid-list.html

<md-grid-list cols="4" rowHeight="200px">

            <md-grid-tile *ngFor="let model of models" [rowspan]="model.rows" [colspan]="model.cols">
             <img style="height:100%" src="assets/{{model.name}}.png" alt="photo of the super model {{model.name}}">
                <!-- new footer! -->
                <md-grid-tile-footer>
                    <h3 md-line></h3>
                    <span md-line></span>
                    <button md-icon-button (click)="showDetails(model)">
                      <md-icon>info</md-icon>
                      </button>
                </md-grid-tile-footer>
            </md-grid-tile>
        </md-grid-list>

Responsive Layout Directions.html

<md-card class="card-demo" >
      <md-card-title>Responsive Layout Directions</md-card-title>
      <md-card-subtitle>Layout direction changes to 'column' for 'xs' or 'sm' viewport sizes:</md-card-subtitle>
      <md-card-content>
        <div class="containerX">
          <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlex class="coloredContainerX box" >
            <div fxFlex> I'm above on mobile, and to the left on larger devices.   </div>
            <div fxFlex> I'm below on mobile, and to the right on larger devices.  </div>
          </div>
        </div>
      </md-card-content>
    </md-card>

responsive-h1.html

<h1 fxFlexAlign="center" [style.xs]="{'font-size.rem': 3 }" [style.sm]="{'font-size.rem': 5}" [style.md]="{'font-size.rem': 7}">

            <small>sm</small>{{ title }}<small>Invest</small></h1>