adapt "around nav" for mobile

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index a0fbb13a364d74a0ec1800e4664bde0332f1bdc6..40bcd2930dca118a5f8dcf4f0c2244a9e82c5000 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -2132,11 +2132,14 @@ div.around-nav {
        height: 350px;
        div.around-nav-previous, div.around-nav-next {
                flex: 1;
-               min-width: 20px;
+               min-width: 30px;
                text-align: center;
                background: $primary;
                height: 50px;
                border: 1px solid $primary;
+               @media screen and (max-width: $mobile-limit) {
+                       min-width: 40px;
+               }
                button {
                        line-height: 45px;
                        color: white;
@@ -2165,6 +2168,7 @@ div.around-nav {
                        border-right: 1px solid $primary;
                        box-sizing: border-box;
                        padding: 0 1rem;
+                       height: 50px;
                        background: white;
                        display: block;
                        width: 244px;
@@ -2173,6 +2177,13 @@ div.around-nav {
                                background: $primary;
                                color: white;
                        }
+                       @media screen and (max-width: 400px) {
+                               border-right: none;
+                               width: calc(100vw - 80px);
+                       }
+                       @media screen and (min-width: 401px) and (max-width: 800px) {
+                               width: 50vw;
+                       }
                }
        }
        div.around-slot-details {