2 files changed, 33 insertions, 9 deletions

diff --git a/resources/pug/finals/index.pug b/resources/pug/finals/index.pug
index 546f1c8..65f015d 100644
--- a/resources/pug/finals/index.pug
+++ b/resources/pug/finals/index.pug
@@ -26,15 +26,14 @@ block content
 
 	.container#content
 		header#introduction
-			div(style="display:table-row;")
+			div
 				img#profile(alt="Camil Staps", style="vertical-align:bottom;", src="/assets/img/profile.jpg", width="170")
 				div#basicinfo(style="display:table-cell;vertical-align:bottom;")
 					h1
 						| Camil Staps 
 						small.text-muted
-							span [kaˈmil stɑps]
-							span  
-							span he/his
+							span.opt-break [kaˈmil stɑps] 
+							span.opt-break he/his
 					p
 						span.tt.obfuscate.wrap-anywhere
 							| info@c
diff --git a/resources/sass/style.scss b/resources/sass/style.scss
index 874ed83..13242db 100644
--- a/resources/sass/style.scss
+++ b/resources/sass/style.scss
@@ -103,16 +103,41 @@ body {
 	word-wrap: anywhere; /* utlity to prevent horizontal scrolling on small screens */
 }
 
+@media (max-width: 1269px) {
+	.opt-break {
+		clear: both;
+		display: inline-block;
+	}
+}
+
 abbr {
 	border-width: 0 !important;
 }
 
-img#profile {
-	margin: 1em 1em 1em 0;
-}
+header > div {
+	@media (min-width: 500px) {
+		display: table-row;
+
+		img#profile {
+			margin: 1em 1em 1em 0;
+			max-width: 30vw;
+		}
 
-div#basicinfo {
-	margin-top: 1em;
+		div#basicinfo {
+			margin-top: 1em;
+		}
+	}
+
+	@media (max-width: 499px) {
+		img#profile {
+			margin: 1em 0;
+			max-width: unset !important;
+		}
+
+		div#basicinfo {
+			clear: both;
+		}
+	}
 }
 
 hr {