diff --git a/web/album.html.template b/web/album.html.template
index bad8b6c..83f83dc 100644
--- a/web/album.html.template
+++ b/web/album.html.template
@@ -3,7 +3,7 @@
 <head>
     <title>{{ .Title }}</title>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
     <link rel="stylesheet" href="/css/main.css">
     <script type="text/javascript" src="/js/main.js"></script>
 </head>
@@ -17,8 +17,8 @@
 </li>
 {{ else if eq .Type "video" }}
 <li>
-<a href="media/{{ .ID }}/"> 
-<video loop muted poster="raw/{{ .Files|photo }}">
+<a href="media/{{ .ID }}/">
+<video loop muted poster="raw/{{ .Files|photo }}" preload="none">
 <source src="raw/{{ .Files|video }}" type="video/mp4">
 </video>
 </a>
diff --git a/web/css/main.css b/web/css/main.css
index 01305b1..561abe6 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -6,6 +6,11 @@ h1 {
     font-family: sans-serif;
 }
 
+html {
+    height: 100%;
+    width: 100%;
+}
+
 /* Album */
 
 body.album {
@@ -38,30 +43,29 @@ body.album {
     flex-grow: 10;
 }
 
-/* Album */
+/* Media */
 
-.media div {
+body.media {
     height: 100%;
     width: 100%;
+    margin: 0;
     display: flex;
-    justify-content: center
-}
-
-html, body.media {
-    height: 100%;
-    margin: 0
+    flex-direction: column-reverse;
+    justify-content: space-between;
 }
 
 body.media h1 {
-    position: fixed;
-    bottom: 0px;
-    left: 10%;
-    right: 10%;
     background-color: #888888AA;
     padding: 1vh;
-    
+    margin-left: 3vh;
+    margin-right: 3vh;
 }
 
-.media div img, .media div video {
+.media img, .media video {
     object-fit: contain;
+    max-height: 80%;
+    max-width: 100%;
+    margin-top: 3vh;
+    margin-left: 3vh;
+    margin-right: 3vh;
 }
\ No newline at end of file
diff --git a/web/index.html.template b/web/index.html.template
index 19737f7..7c68e94 100644
--- a/web/index.html.template
+++ b/web/index.html.template
@@ -3,7 +3,7 @@
 <head>
     <title>{{ .Title }}</title>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
     <link rel="stylesheet" href="/css/main.css">
 </head>
 <body class="index">
diff --git a/web/media.html.template b/web/media.html.template
index 1803cb7..f1bf4e9 100644
--- a/web/media.html.template
+++ b/web/media.html.template
@@ -3,14 +3,13 @@
 <head>
     <title>{{ .Caption }}</title>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
     <link rel="stylesheet" href="/css/main.css">
 </head>
 <body class="media">
 {{ if ne .Caption "" }}
 <h1>{{ .Caption }}</h1>
 {{ end }}
-<div>
 {{ if eq .Type "photo" }}
 <img src="../../raw/{{ .Files|photo }}" />
 {{ else if eq .Type "video" }}
@@ -18,6 +17,6 @@
 <source src="../../raw/{{ .Files|video }}" type="video/mp4">
 </video>
 {{ end }}
-</div>
+<div><!-- Empty Flex element so that "justify-content: space-between" work as expected --></div>
 </body>
 </html>
