Fixing part card sizing for mobile

norkator · Jun 7, 2020 · 8cacfdd · 8cacfdd
1 parent a290466
commit 8cacfdd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 26 deletions.
diff --git a/yagi-pro/src/app/app.component.html b/yagi-pro/src/app/app.component.html
@@ -54,28 +54,25 @@ <h2>Basics</h2>
         <mat-panel-description>
         </mat-panel-description>
       </mat-expansion-panel-header>
-      <mat-grid-list cols="2" rowHeight="1:1">
-        <mat-grid-tile>
-          <mat-card class="grid-tile-position">
-            <mat-card-header>
-              <mat-card-title>Yagi_30_4.stl</mat-card-title>
-              <mat-card-subtitle>Boom 30mm, parasitic 4mm</mat-card-subtitle>
-            </mat-card-header>
-            <img mat-card-image src="https://cdn.thingiverse.com/assets/93/a8/c0/3f/64/featured_preview_Yagi_30_4.png"
-                 alt="featured_preview_Yagi_30_4.png">
-            <mat-card-content>
-              <p>
-                Antenna parasitic element connector for easy install and adjusting. It's for 30mm diameter boom and 4mm
-                parasitic elements.
-              </p>
-            </mat-card-content>
-            <mat-card-actions>
-              <button mat-button (click)="openUrl('https://www.thingiverse.com/thing:4427895')">Download</button>
-            </mat-card-actions>
-          </mat-card>
-        </mat-grid-tile>
-        <mat-grid-tile></mat-grid-tile>
-      </mat-grid-list>
+
+      <mat-card class="card-tile-sizing">
+        <mat-card-header>
+          <mat-card-title>Yagi_30_4.stl</mat-card-title>
+          <mat-card-subtitle>Boom 30mm, parasitic 4mm</mat-card-subtitle>
+        </mat-card-header>
+        <img mat-card-image src="https://cdn.thingiverse.com/assets/93/a8/c0/3f/64/featured_preview_Yagi_30_4.png"
+             alt="featured_preview_Yagi_30_4.png">
+        <mat-card-content>
+          <p>
+            Antenna parasitic element connector for easy install and adjusting. It's for 30mm diameter boom and 4mm
+            parasitic elements.
+          </p>
+        </mat-card-content>
+        <mat-card-actions>
+          <button mat-button (click)="openUrl('https://www.thingiverse.com/thing:4427895')">Download</button>
+        </mat-card-actions>
+      </mat-card>
+
     </mat-expansion-panel>
   </mat-accordion>
 

diff --git a/yagi-pro/src/app/app.component.scss b/yagi-pro/src/app/app.component.scss
@@ -89,8 +89,6 @@ footer a {
   align-items: center;
 }
 
-.grid-tile-position {
-  max-width: 50%;
-  position: absolute;
-  left: 5px;
+.card-tile-sizing {
+  max-width: 400px;
 }