diff --git a/src/app/component/cardlayoutcomponent/cardlayout.component.css b/src/app/component/cardlayoutcomponent/cardlayout.component.css
index 2d9b72b..1299ce8 100644
--- a/src/app/component/cardlayoutcomponent/cardlayout.component.css
+++ b/src/app/component/cardlayoutcomponent/cardlayout.component.css
@@ -106,6 +106,68 @@ button {
   }
 }
 
+@media screen and (max-width: 375px), 
+       screen and (max-height: 667px) {
+  .card-group{
+    width: 100%;
+    height: 100%;
+    margin: auto;
+  }
+  .card{
+    height: 150px;
+    margin: auto;
+    margin-top: 10px;
+  }
+  
+  .card-header > h4{
+    font-size: 10px;
+  }
+  .card-body > h2
+  {
+    font-size: 14px;
+  }
+  .card-body > p
+  {
+    font-size: 8px;
+  }
+  .tag{
+    font-size: 6.5px;
+  }
+  
+}
+
+@media screen and (max-width: 320px), 
+       screen and (max-height: 568px) {
+  .card-group{
+    margin: auto;
+    width: 200px;
+    height: 100%;
+    margin: auto;
+  }
+  .card{
+    height: 160px;
+    width: 100%;
+    margin: auto;
+    margin-top: 10px;
+  }
+  
+  .card-header > h4{
+    font-size: 10px;
+  }
+  .card-body > h2
+  {
+    font-size: 14px;
+  }
+  .card-body > p
+  {
+    font-size: 8px;
+  }
+  .tag{
+    font-size: 6.5px;
+  }
+  
+}
+
 @media (max-width: 350px) {
     .card-header > h4{
       font-size: 10px;
@@ -121,4 +183,4 @@ button {
     .tag{
       font-size: 6.5px;
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/component/maincompontent/main.component.css b/src/app/component/maincompontent/main.component.css
index d253754..382870e 100644
--- a/src/app/component/maincompontent/main.component.css
+++ b/src/app/component/maincompontent/main.component.css
@@ -41,6 +41,10 @@ h5 {
   align-items: center;
 }
 
+.section-container{
+  /*height: 100%;*/
+}
+
 .always-on-button {
   display: none;
 }
diff --git a/src/app/component/maincompontent/main.component.html b/src/app/component/maincompontent/main.component.html
index 8047783..98bd408 100644
--- a/src/app/component/maincompontent/main.component.html
+++ b/src/app/component/maincompontent/main.component.html
@@ -3,10 +3,10 @@
   <div #jumpingArrow class="jumping-arrow"><i class="bi bi-arrow-down"></i></div>
 </div>
 <div #sectionTwo id="2" class="section-layout">
-  <carousel-component class="container-fluid"></carousel-component>
+  <carousel-component class="section-container"></carousel-component>
 </div>
 <div #sectionThree id="3" class="section-layout">
-  <cardlayout-component class="container-fluid"></cardlayout-component>
+  <cardlayout-component class="section-container"></cardlayout-component>
 </div>
 <div #sectionFour id="4">
   <footer-component></footer-component>