From 1e5c56fb3169a8eb15223218a14cb8ac9172b7ac Mon Sep 17 00:00:00 2001 From: meow Date: Wed, 6 May 2020 10:20:00 +0500 Subject: [PATCH] Make slider little more responsive --- templates/blocks/slide.html | 20 +++++++------ templates/layout-2020.html | 58 +++++++++++++++++++++++++++++++------ 2 files changed, 60 insertions(+), 18 deletions(-) diff --git a/templates/blocks/slide.html b/templates/blocks/slide.html index 6be6599..43e5475 100644 --- a/templates/blocks/slide.html +++ b/templates/blocks/slide.html @@ -7,15 +7,17 @@ {% elif this.background_image %} ... {% endif %} -
-

{{ this.title }}

-

- {{ this.description }} -
- - {{ this.button_text }} - -

+
+
+

{{ this.title }}

+

+ {{ this.description }} +
+ + {{ this.button_text }} + +

+
diff --git a/templates/layout-2020.html b/templates/layout-2020.html index 1c3f276..c25246b 100644 --- a/templates/layout-2020.html +++ b/templates/layout-2020.html @@ -46,12 +46,49 @@ width:100%; } - .carousel-caption { + .carousel-caption { right: 5%; text-align: right; left: auto; padding:5px; } + + /* Extra small devices (portrait phones, less than 576px) */ + @media (max-width: 575.98px) { + .carousel-item { + height: 200px; + } + } + + /* Small devices (landscape phones, 576px and up) */ + @media (min-width: 576px) and (max-width: 767.98px) { + .carousel-item { + height: 300px; + } + } + + /* Medium devices (tablets, 768px and up) */ + @media (min-width: 768px) and (max-width: 991.98px) { + .carousel-item { + height: 400px; + } + } + + /* Large devices (desktops, 992px and up) */ + @media (min-width: 992px) and (max-width: 1199.98px) { + .carousel-item { + height: 450px; + } + } + + /* Extra large devices (large desktops, 1200px and up) */ + /* + @media (min-width: 1200px) { + .carousel-item { + height: 900px; + } + } */ + @@ -132,14 +169,17 @@
{{ this.slide }}
- - - Previous - - - - Next - +
+ + + Previous + + + + Next + +
+