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 %}
   <img src="{{ this.background_image }}" class="d-block w-100" alt="...">
   {% endif %}
-  <div class="carousel-caption d-none d-md-block">
-    <h3 class="display-4">{{ this.title }}</h5>
-    <p class="lead">
-      {{ this.description }}
-      <br>
-      <a href="{{ this.button_link }}" class="btn btn-primary btn-lg" role="button" aria-pressed="true">
-        {{ this.button_text }}
-      </a>
-    </p>
+  <div class="container">
+    <div class="carousel-caption">
+      <h3 class="display-4">{{ this.title }}</h5>
+      <p class="lead">
+        {{ this.description }}
+        <br>
+        <a href="{{ this.button_link }}" class="btn btn-primary btn-lg" role="button" aria-pressed="true">
+          {{ this.button_text }}
+        </a>
+      </p>
+    </div>
   </div>
 </div>
 
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;
+      }
+    } */
+
     </style>
   </head>
   <body>
@@ -132,14 +169,17 @@
       <div class="carousel-inner">
         {{ this.slide }}
       </div>
-      <a class="carousel-control-prev" href="#head-carousel" role="button" data-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="sr-only">Previous</span>
-      </a>
-      <a class="carousel-control-next" href="#head-carousel" role="button" data-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="sr-only">Next</span>
-      </a>
+      <div class="d-none d-sm-none d-md-block">
+        <a class="carousel-control-prev" href="#head-carousel" role="button" data-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="sr-only">Previous</span>
+        </a>
+        <a class="carousel-control-next" href="#head-carousel" role="button" data-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+        </a>
+      </div>
+      
     </div>
     <!-- End of Slider-->
 
