Working vertical audio transformation and small view screen

src/app/app.component.css

@@ -1,27 +1,19 @@
 .rootContainer {
 	font-family: 'Roboto', sans-serif;
-}
-
-.header {
+	width: 100%;
 }
 
 .header mat-card {
 	width: 100%;
 }
-body {
-	display: block;
-	margin: 0;
-	width: 100%;
-}
 
 .title {
 	font-size: 1.5rem;
 }
 .slogan {
 	font-size: .75rem;
 }
+
 .titleBox {
-	display: inline-block;
-	padding-right: 20px;
-	border-right: 2px solid white;
-}
+	text-align: center;
+}

src/app/app.component.html

@@ -1,11 +1,14 @@
+<div class="rootContainer">
+	<mat-card class="header">
+		<div class="titleBox">
+			<span class="title">Hot Cakes & Hot Takes</span><br/>
+			<span class="slogan">The premier post-pancake podcast</span>
+		</div>
+	</mat-card>
+	<app-episodes></app-episodes>
+</div>
+
 
-<mat-card class="header">
-	<div class="titleBox">
-		<span class="title">Hot Cakes & Hot Takes</span><br/>
-		<span class="slogan">The premier post-pancake podcast</span>
-	</div>
-</mat-card>
-<app-episodes></app-episodes>	
 
 
 

src/app/episodes/episodes.component.css

@@ -1,40 +1,28 @@
-.wrapper {
-	overflow: hidden;
-}
-
-.episodeViewContainer {
-	display: block;
-	position: relative;
-	top: 0;
-	left: 0;
-	transform: translateX(0);
-	transition: transform .6s ease;
-}
-
 .audioPanel {
-	position: absolute;
-	width: 300px;
-	height: 100%;
-	transform: translateX(-100%);
+	position: fixed;
+	width: 100%;
+	top: 100%;
+	z-index: 50;
+	text-align: center;
+	transform: translateY(100%);
+	transition: transform .6s ease;
 }
 
 .closeBtn {
 	float: right;
-}
-
-audio {
+	margin: 10px;
 }
 
 .episodes {
-	display: inline-flex;
+	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-around;
 	background-color: white;
 }
 
 .episodeCard {
 	display: inline-block;
-	margin: .625em;
+	margin: .625rem;
 	width: 35%;
 	max-width: 12em;
 }
@@ -43,3 +31,16 @@ audio {
 	background-color: lightyellow;
 	color: black;
 }
+
+@media only screen and (max-width: 500px) {
+	.episodes {
+		display: inline-flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+	}
+
+	.episodeCard {
+		width: auto;
+		max-width: none;
+	}
+}

src/app/episodes/episodes.component.html

@@ -1,19 +1,15 @@
-<div class="wrapper">
-	<div id="episodeViewContainer" class="episodeViewContainer">
-		<mat-card id="audioPanel" class="audioPanel">
-			<button class="closeBtn" (click)="close()">X</button>
-			<div class="title"> I am the audio{{selectedEpisode.title}} </div><br/>
-			<div class="description"> {{selectedEpisode.summary}}</div><br/>
-			<audio controls src="{{selectedEpisode.audio}}" type="audio/mpeg"></audio>
-		</mat-card>
-		<mat-card class="episodes">
-			<mat-card class="episodeCard" *ngFor="let episode of episodes" (click)="setSelected(episode)">
-				<mat-card-header></mat-card-header>
-				<img mat-card-image src="{{episode.img}}">
-				<mat-card-footer> 
-					<mat-card-title> {{episode.number}} </mat-card-title>
-				</mat-card-footer>
-			</mat-card>
-		</mat-card>
-	</div>
-</div>
+<mat-card id="audioPanel" class="audioPanel">
+	<button class="closeBtn" (click)="close()">X</button>
+	<div class="title">{{selectedEpisode.title}} </div><br/>
+	<audio controls src="{{selectedEpisode.audio}}" type="audio/mpeg"></audio>
+</mat-card>
+<mat-card class="episodes">
+	<mat-card class="episodeCard" *ngFor="let episode of episodes" (click)="setSelected(episode)">
+		<mat-card-header></mat-card-header>
+		<img mat-card-image src="{{episode.img}}">
+		<mat-card-footer> 
+			<mat-card-title> {{episode.number}} </mat-card-title>
+		</mat-card-footer>
+	</mat-card>
+</mat-card>
+

src/app/episodes/episodes.component.ts

@@ -20,12 +20,12 @@ export class EpisodesComponent implements OnInit {
 
   close() {
     this.selected = false;
-    document.getElementById('episodeViewContainer').style.transform = "translateX(0)";
+    document.getElementById('audioPanel').style.transform = "translateY(0)";
   }
 
   setSelected(episode: Episode) {
     this.selected = true;
   	this.selectedEpisode = episode;
-    document.getElementById('episodeViewContainer').style.transform = "translateX(348px)";
+    document.getElementById('audioPanel').style.transform = "translateY(-100%)";
   }
 }

src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>HotCakesHotTakes</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">