Placed each FAQ divs in order

COS301-SE-2024 · Jul 18, 2024 · 14830fa · 14830fa
1 parent 5074460
commit 14830fa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/gnd-app/src/app/faq-page/faq-page.component.css b/gnd-app/src/app/faq-page/faq-page.component.css
@@ -23,14 +23,25 @@
     border-radius: 50%;
 }
 
-.grid-container-element { 
-    display: grid; 
+.grid-parent { 
+    /* display: grid; 
     grid-template-columns: 1fr 1fr; 
     grid-gap: 20px; 
-    width: 50%;     
+    width: 50%;      */
+    display: flex;
+    justify-content: space-around;
 } 
-.grid-child-element { 
+
+.grid-gnd { 
+    margin: 10px; 
+    border: 1px solid black;
+    width: 40%;
+    padding: 20px;    
+}
+
+.grid-gdpr {
     margin: 10px; 
     border: 1px solid black;
-    /* border: 1px solid red;  */
+    width: 40%;
+    padding: 20px;
 }
diff --git a/gnd-app/src/app/faq-page/faq-page.component.html b/gnd-app/src/app/faq-page/faq-page.component.html
@@ -14,8 +14,8 @@
   </header>
 </div>
 
-<div class="grid-container-element">
-  <div class="grid-child-element gnd">
+<div class="grid-parent">
+  <div class="grid-gnd">
     <!-- How to use GND FAQs -->
     <h1>GND FAQ</h1>
     <p>
@@ -24,7 +24,7 @@ <h1>GND FAQ</h1>
     </p>
   </div>
 
-  <div class="grid-child-element gdpr">
+  <div class="grid-gdpr">
     <!-- GDPR Violation FAQs -->
     <h1>GDPR FAQ</h1>
 
@@ -107,3 +107,4 @@ <h3>What are some best practices for GDPR compliance?</h3>
     </p>
   </div>
 </div>
+