diff --git a/examples/static/schild.css b/examples/static/schild.css
index d445ba23d7ca98133f803e58b1d9955cf7762e9d..0443bb20d0778f0b318e6449e72d148ce6f8e25e 100644
--- a/examples/static/schild.css
+++ b/examples/static/schild.css
@@ -3,11 +3,32 @@
     margin: 50px;
 }
 
+* {
+    box-sizing: border-box;
+}
+
 body {
     font-size: 48px;
     font-family: "Noto Sans", sans-serif;
     padding: 0;
     margin: 0;
+    display: flex;
+    flex-direction: column;
+    @media not print {
+	/* This magic constant approximately corresponds to 48px at A4 size, but scales
+	 * with the viewport/iframe size
+	 */
+	font-size: 4.27426536064114vw;
+	padding: 4.27426536064114vw;
+	width: 100vw;
+	height: 100vh;
+	max-width: 100vw;
+	max-height: 100vh;
+    }
+}
+
+main {
+    flex-grow: 1;
 }
 
 img {
@@ -19,16 +40,16 @@ img {
 
 #logo {
     width: 15%;
-    position: fixed;
-    bottom: 0;
-    right: 0;
 }
 
 footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
     font-size: 0.5em;
+    display: flex;
+    align-items: flex-end;
+}
+
+#footer {
+    flex-grow: 1;
 }
 
 h1 {
diff --git a/schilder2000/templates/schild.html.j2 b/schilder2000/templates/schild.html.j2
index 8915deb7c68f0bf863b17d1ee67ecb0462468125..87c47fbde9ef0802d05f3cc64df871e10b853d7d 100644
--- a/schilder2000/templates/schild.html.j2
+++ b/schilder2000/templates/schild.html.j2
@@ -43,10 +43,12 @@
 		</div>
 		<div>
 			<h2>Vorschau</h2>
-			<iframe
-				class="preview"
-				id="preview"
-				src="{{ url_for('instance.schild_html', ident=schild.ident) }}" />
+			<div class="preview-container" id="preview-container">
+				<iframe
+					class="preview"
+					id="preview"
+					src="{{ url_for('instance.schild_html', ident=schild.ident) }}" />
+			</div>
 		</div>
 	{% endif %}
 {% endblock main %}