From: rsiddharth <rsd@gnu.org>
Date: Sun, 12 Aug 2018 21:34:53 +0000 (+0000)
Subject: 2019: Fix carousel chevron position on smaller screens.
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=662f6dfc79a8cbf68cd5198302e8cba38dcde701;p=libreplanet-static.git

2019: Fix carousel chevron position on smaller screens.

* 2019/assets/css/custom.css: Add styling for carousel's chevron on
smaller screents.
* 2019/index.html: Move carousel chevrons inside the carousel div.
---

diff --git a/2019/assets/css/custom.css b/2019/assets/css/custom.css
index 20c029a7..59472be9 100644
--- a/2019/assets/css/custom.css
+++ b/2019/assets/css/custom.css
@@ -412,6 +412,24 @@ hr {
   display: none;
 }
 
+@media (min-width: 375px) and (max-width: 767px) {
+    .carousel-control .icon-prev,
+    .carousel-control .icon-next,
+    .carousel-control .glyphicon-chevron-left,
+    .carousel-control .glyphicon-chevron-right {
+        top: 60%;
+    }
+}
+
+@media (max-width: 374px) {
+    .carousel-control .icon-prev,
+    .carousel-control .icon-next,
+    .carousel-control .glyphicon-chevron-left,
+    .carousel-control .glyphicon-chevron-right {
+        top: 70%;
+    }
+}
+
 .carousel-caption-tr {
   position: absolute;
   font-size: 1.1em;
diff --git a/2019/index.html b/2019/index.html
index 5ef5989c..2d7c45c9 100755
--- a/2019/index.html
+++ b/2019/index.html
@@ -38,17 +38,18 @@
 
         </li>
     </ul>
+
+    <!-- These are the controls for the carousel. Comment them in if you want the little navigation chevrons and the skrims that appear when you mouse over the edges of the active image.-->
+    <a class="left carousel-control" href="#lpc-carousel" data-slide="prev">
+	<span class="glyphicon glyphicon-chevron-left"></span>
+    </a>
+    <a class="right carousel-control" href="#lpc-carousel" data-slide="next">
+	<span class="glyphicon glyphicon-chevron-right"></span>
+    </a>  <!--end of carousel -->
 </div>
 
 
-<!-- These are the controls for the carousel. Comment them in if you want the little navigation chevrons and the skrims that appear when you mouse over the edges of the active image.-->
 
-<a class="left carousel-control" href="#lpc-carousel" data-slide="prev">
-	<span class="glyphicon glyphicon-chevron-left"></span>
-</a>
-<a class="right carousel-control" href="#lpc-carousel" data-slide="next">
-	<span class="glyphicon glyphicon-chevron-right"></span>
-</a>  <!--end of carousel -->
 
 <div class="col-sm-12">
     <!--#include virtual="/2019/includes/home-content.html"-->