adaptive layout for small screen devices

1 files changed, 18 insertions, 0 deletions

diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index 74da50b..42e9c6f 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -90,6 +90,7 @@ span.icon {
 }
 
 h2 > span.publish-date {
+  display: inline-block;
   font-size: 0.8em;
 }
 
@@ -121,6 +122,7 @@ h2 > span.publish-date {
 }
 
 .landing-page-container > .links-container > a {
+  display: inline-block;
   font-size: 1.5em;
   margin: auto 1em;
 }
@@ -179,3 +181,19 @@ h2 > span.publish-date {
   background-color: $dark_cyan;
   color: $white;
 }
+
+@media (max-width: 768px){
+  .landing-page-container {
+    font-size: 1em;
+  }
+  .header-container,
+  .content-container,
+  .sidebar-container {
+    grid-column-start: 1;
+    grid-column-end: 3;
+  }
+  .sidebar-container {
+    grid-row-start: auto;
+    grid-row-end: auto;
+  }
+}