Responsive footer

_sass/elixir/_layout.scss

@@ -138,10 +138,18 @@
 #site-footer-primary {
   #site-footer-primary-wrapper {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    flex-wrap: wrap;
     background: #3e3e3e;
     font-size: 0.875rem;
-    padding-left: 13%;
+
+    @media only screen and (min-width: 600px) {
+      padding-left: 13%;
+    }
+
+    @media only screen and (max-width: 600px) {
+      padding-left: 2%;
+    }
 
     div {
       margin-left: 15px;
@@ -207,10 +215,18 @@
   #site-footer-secondary-wrapper {
     background: #023452;
     border-top: 1px solid #333;
-    padding-left: 13%;
     color: #ebebeb;
     font-size: 0.875rem;
     display: flex;
+    flex-wrap: wrap-reverse;
+
+    @media only screen and (min-width: 600px) {
+      padding-left: 13%;
+    }
+
+    @media only screen and (max-width: 600px) {
+      padding-left: 2%;
+    }
 
     div {
       margin-left: 15px;
@@ -221,8 +237,17 @@
       padding-inline-start: 0px;
       padding-right: 100px;
 
-      li {
-        display: inline-block;
+      @media only screen and (min-width: 600px) {
+        li {
+          display: inline-block;
+        }
+      }
+
+      @media only screen and (max-width: 600px) {
+        li {
+          display: list-item;
+          margin-top: 7px;
+        }
       }
 
       a {

elixir-theme.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "elixir-theme"
-  spec.version       = "0.1.36"
+  spec.version       = "0.2.1"
   spec.authors       = ["jacek.lebioda"]
   spec.email         = ["jacek.lebioda@uni.lu"]