fix(responsive): updated main list and added css media queries

Author: Ismaestro

README.md

@@ -6,7 +6,7 @@
 
 Live demo [here](https://ismaestro.github.io/angular4-example-app/)!
 
-![angular4-example-app](http://i68.tinypic.com/4vst21.jpg)
+![angular4-example-app](http://i68.tinypic.com/2jbwkyd.jpg)
 
 ## Usage
 

src/app/core/nav/nav.component.scss

@@ -31,3 +31,18 @@
   }
 }
 
+@media (max-width: 425px) {
+  :host(toh-nav) {
+    padding-top: 0;
+
+    header {
+      position: relative;
+
+      nav {
+        height: 7em;
+        display: flex;
+        padding: 1em 2em 0;
+      }
+    }
+  }
+}

src/app/heroes/hero-top/hero-top.component.html

@@ -4,8 +4,8 @@ <h1 class="section-title">{{'topHeroes' | translate}}</h1>
                      [color]="'primary'"
                      [mode]="'indeterminate'">
 </md-progress-spinner>
-<md-grid-list cols="2" rowHeight="400px" *ngIf="heroes">
-    <md-grid-tile *ngFor="let hero of heroes">
+<div id="heroes-list" *ngIf="heroes">
+    <ng-container *ngFor="let hero of heroes">
         <md-card class="hero-card">
             <md-card-header>
                 <div md-card-avatar class="hero-header-image"
@@ -23,5 +23,5 @@ <h1 class="section-title">{{'topHeroes' | translate}}</h1>
             </md-card-header>
             <img md-card-image src="assets/images/heroes/{{hero.id}}.jpg">
         </md-card>
-    </md-grid-tile>
-</md-grid-list>
+    </ng-container>
+</div>

src/app/heroes/hero-top/hero-top.component.scss

@@ -1,5 +1,10 @@
+#heroes-list {
+  margin: 2em;
+}
+
 .hero-card {
-  width: 70%;
+  width: 45%;
+  margin: 2em auto;
 }
 
 .hero-header-image {
@@ -13,3 +18,10 @@
 .progress-spinner {
   margin: 0 auto;
 }
+
+@media (max-width: 425px) {
+  .hero-card {
+    width: 80%;
+    margin: 0 auto;
+  }
+}