_gdpr.scss in jekyll-theme-lcsb-default-0.4.1

- old
+ new

@@ -8,10 +8,11 @@
     left: 0;
     text-align: center;
     border-top: 1px solid #198cdc;
     width: 100%;
     display: none;
+
     /* hidden by default */
 }
 
 #lap-cookies-banner .banner-intro {
     width: 40%;
@@ -52,17 +53,10 @@
 #lap-cookies-banner .close-button {
     position: absolute;
     left: 100%;
 }
 
-#lap-cookies-banner .banner-buttons .banner-buttons-more {
-    position: relative;
-    left: 55%;
-    top: -28px;
-    width: 20%;
-}
-
 #lap-cookies-banner .banner-buttons .lap-accept,
 #lap-cookies-banner .banner-buttons .lap-refuse,
 #lap-cookies-banner .banner-buttons .lap-cookies-more,
 #lap-cookies-banner .banner-buttons .btn.active {
     border: 1px solid #198cdc;
@@ -101,10 +95,12 @@
     line-height: 20px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    margin-right: 10px;
+    margin-bottom: 10px;
 }
 
 // Small component to show a Material Design style input toggle
 // ref: https://codepen.io/FezVrasta/pen/yNRgrB - MIT licensed
 $toggle-w: 32px;
@@ -193,22 +189,33 @@
     top: -0.2em;
     position: relative;
 }
 
 @media(max-width: 500px) {
+    #lap-cookies-banner {
+        position: fixed;
+        bottom: 0;
+        background-color: #fff;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        z-index: 1000;
+        left: 0;
+        text-align: center;
+        border-top: 1px solid #198cdc;
+        width: 100%;
+        display: none;
+        height: 280px;
+        overflow: auto;
+        /* hidden by default */
+    }
+
     #lap-cookies-banner .banner-intro {
         width: 60%;
         position: relative;
         left: 20%;
         text-align: left;
     }
-    #lap-cookies-banner .banner-buttons .banner-buttons-more {
-        position: relative;
-        left: 25%;
-        top: 10px;
-        width: 50%;
-    }
 }
 
 @media(max-width: 1100px) {
     #lap-cookies-banner .banner-intro {
         width: 90%;
@@ -220,16 +227,10 @@
         float: center;
         padding-top: 5px;
         height: 60px;
         margin-bottom: 10px;
     }
-    #lap-cookies-banner .banner-buttons .banner-buttons-more {
-        position: relative;
-        left: 25%;
-        top: 10px;
-        width: 50%;
-    }
 }
 
 @media(max-width: 1600px) {
     #lap-cookies-banner .banner-intro {
         width: 60%;
@@ -240,19 +241,11 @@
 }
 
 /* ultra-wide screen */
 @media(min-width: 2400px) {
     #lap-cookies-banner .banner-intro {
-
         position: relative;
         text-align: left;
         max-width: 800px;
         left: 35%;
-    }
-
-    #lap-cookies-banner .banner-buttons .banner-buttons-more {
-        position: relative;
-        left: 50%;
-        top: -28px;
-        width: 20%;
     }
 }
\ No newline at end of file