More improvements for small screens

1 files changed, 30 insertions, 5 deletions

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 {