[feature 157801294] Fix shifting carousel issue

andela · Jun 13, 2018 · cefa570 · cefa570
1 parent b0fbcb7
commit cefa570
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1581,19 +1581,40 @@ text-align: right;
   font-size: 55px;
   color: rgba(255, 0, 13, 0.774);
 } */
+.carousel-inner > .active {
+  height: 325px;
+}
 .carousel-indicators {
   display: none !important;
 }
 .how-to-play .overlay h2 {
   margin: 0px;
-  padding: 15px;
+  padding: 3%;
 }
-.how-to-play {
-  padding: 35px;
+/* 
+  override for the carousel to stop it from moving about
+  need for media query on this...
+*/
+.carousel {
+  min-height: 380px;
 }
-.carousel-inner {
-  padding: 20px;
+@media (min-width: 992px) {
+  .carousel {
+    min-height: 430px;
+  }
 }
+.carousel-inner{
+  overflow: visible;
+  margin-top: 1%;
+  min-height: 100%;
+}
+/* .how-to-play {
+  /* padding: 35px; 
+}
+.carousel-inner {
+  /* padding: 20px; 
+} */
+
 /* Bootstrap 4 cut-ins*/
 .navbar-collapse {
   -ms-flex-preferred-size: 100%;

diff --git a/public/views/index.html b/public/views/index.html
@@ -113,9 +113,12 @@ <h2 class="text-center">HOW TO PLAY</h2>
                     </div>
                 <!-- </div> -->
             </slide>
+            <!-- pleaseinsert red text in the div below -->
+            <!--<div></div>-->
             <slide>
                 <div class="carousel-item text-center video slide-hide-on-mobile">
-                    <video controls src="../video/test.mp4" type="video/mp4" >
+                    <video controls>
+                        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
                         Your browser does not support HTML5 video.
                     </video>
                 </div>