mages are stretching on content list page

Sunbird-AIAssistant · Aug 14, 2024 · 96c221b · 96c221b
1 parent 0615652
commit 96c221b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
@@ -36,7 +36,7 @@
     </ion-item>
   </ion-list>
   <!-- Cards -->
-  <ion-list *ngIf="!showSheenAnimation && configContents.length > 0">
+  <ion-list id="content-list" *ngIf="!showSheenAnimation && configContents.length > 0">
     <div class="cards-container" *ngFor="let content of configContents; let i = index">
       <!-- <div class="bot-section" *ngIf="i === 5">
         <div class="image" (click)="navigateToSakhi('story')">
@@ -80,4 +80,4 @@
   <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)" *ngIf="!showSheenAnimation && configContents.length > 0">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
   </ion-infinite-scroll>
-</ion-content>
+</ion-content>
diff --git a/src/assets/styles/_card.scss b/src/assets/styles/_card.scss
@@ -86,4 +86,24 @@
 
 .no-data {
     text-align: center;
-}
+}
+
+#content-list{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+@media (max-width: 700px) {
+
+    #content-list{
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        grid-template-rows: repeat(5, 1fr);
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+    }
+
+}