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 20c029a79ab1d165db1c8552fcb5490424ca6607..59472be9664d9ca3b52fb4cc70e15797507e0f93 100644 (file)
--- 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 5ef5989c688e83e626eca1cab956350e96340fd2..2d7c45c957649a609ed1360c987ca2f685c1d468 100755 (executable)
--- 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"-->