General Fixes

Author: Samuel jose Molero gonzalez

src/About.css

@@ -5,10 +5,10 @@
 html {
     scroll-behavior: smooth;
 }
-
+  
 
 .about-container h1 {
-    text-align: left;
+    margin: 20px 0;
     font-size: 3rem;
     background: linear-gradient(90deg, #ff4d4d, #0085ff);
     display: inline-block;
@@ -20,11 +20,23 @@ html {
 }
 
 .text {
-    display: flex;
+    /* display: flex;
     flex-direction: row;
     align-items: flex-start; /* Align items to the top */
+    /* justify-content: space-between;
+    gap: 20px;   */
+    /* font-size: 1rem;
+    line-height: 1.5;
+    margin-bottom: 20px;
+    justify-content: space-between; */
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-bottom: 20px;
     justify-content: space-between;
-    gap: 20px;
+    font-weight: 10rem;
 
 }
 
@@ -35,11 +47,13 @@ html {
     max-height:500px;
     max-width: 700px;
     font-family: 'Open Sans', sans-serif;
-    font-weight: 10rem !important;
+    font-weight: 10rem;
     font-size: 1.2rem;
     animation: fade-in 2s ease-in-out;
     letter-spacing: 1.2px !important;
     text-align: justify;
+    flex: 1;
+    margin-right: 10px;
 
 }
 
@@ -68,10 +82,17 @@ html {
   }
 
 .side-image {
-    align-self: flex-start;
+    /* align-self: flex-start;
     height:300px;
     margin-right: 200px;
     animation: fade-in 2s ease-in-out;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 20px auto; */
+    max-width: 300px;
+    height: auto;
+    margin-right: 20rem;
 }
 
 .grid-container {
@@ -81,8 +102,39 @@ html {
 }
 
 .grid-item {
+    flex: 1 1 calc(33.333% - 20px);
     text-align:center;
+    box-sizing: border-box;
+    padding: 20px;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    background-color: transparent;
+    text-align: center;
+    
+}
+
+@media (max-width: 768px) {
+    .header-section {
+      font-size: 2rem;
+    }
+
+    .text {
+        font-size: 0.9rem;
+        flex-direction: column;
+      }
+    
+      .text p {
+        margin-right: 0;
+      }
+      
+      .text2 {
+        font-size: 1rem;
+        
+      }
 
+      .grid-item {
+        flex: 1 1 calc(100% - 20px);
+      }
 }
 
 .grid-logo {

src/About.js

@@ -5,6 +5,12 @@ body {
   font-family: 'Roboto', sans-serif;
 }
 
+@media (max-width: 768px) {
+  .header-section {
+    font-size: 2rem;
+  }
+}
+
 .App {
   text-align: center;
 

src/App.css

@@ -32,7 +32,7 @@ function App() {
             </div>
           </div>
 
-          <a href="https://discord.gg/52RwejHd" className="join-us-button">Join Us</a>  
+          <a href="https://discord.gg/Uzkyn7Xpqq" className="join-us-button">Join Us</a>  
         </header>
 
         <Routes>

src/App.js

@@ -17,6 +17,13 @@
     margin-bottom: 40px;
   }
 
+
+  @media (max-width: 768px) {
+    .latest-newsletter iframe {
+      height: 300px;
+    }
+  }
+  
   .previous-newsletters ul {
     list-style-type: none;
     padding: 0;

src/Newsletter.css

@@ -9,7 +9,7 @@ function Newsletter() {
 
   useEffect(() => {
 
-    const url = 'https://sheet2api.com/v1/YW0AA7DGRpKC/newsletter-database/Sheet1?';
+    const url = 'https://sheet2api.com/v1/YW0AA7DGRpKC/newsletter-database';
 
     fetch(url)
       .then(response => response.json())

src/Newsletter.js

@@ -9,6 +9,12 @@
     -webkit-text-fill-color:transparent;
 }
 
+@media (max-width: 768px) {
+    .header-section {
+      font-size: 2rem;
+    }
+  }
+
 html {
     scroll-behavior: smooth;
 }

src/Officers.css

@@ -3,7 +3,7 @@
     flex-direction: column;
     align-items: center;
     padding: 20px;
-    background-color: #f9f9f9;
+    background-color:  #2a2a3c;
   }
 
   .header-section {
@@ -18,7 +18,7 @@
     max-width: 800px;
     margin-bottom: 40px;
     padding: 20px;
-    background-color: #fff;
+    background-color: #ffffffad;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }