Feature/general modifications

README.md

@@ -114,7 +114,7 @@ Air-quality is a full stack app that displays numeric air-quality data from vari
 
 ## 🚀 Project Presentation <a name="project-presentation"></a>
 
-- [Project Presentation ](https://loom.com)
+- [Project Presentation ](https://www.loom.com/share/a0e8aafa6cdf45a9a7a0e07eac834d92?sid=fc3729f8-0efd-439c-a260-7991e9cddd6c)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

src/components/Home.js

@@ -97,7 +97,7 @@ const Home = () => {
                           <div className="card-info-container flex-container flex-column">
                             <Card.Title style={{ width: '6rem' }} className="title-text white-text bold ellipsis- multiline-2 text-wrap">
                               {' '}
-                              {truncatedTitle}
+                              {truncatedTitle.toUpperCase()}
                             </Card.Title>
                           </div>
                           <div className="measurements-text white-text wrap-break">

src/media/mediaConfig.js

@@ -66,6 +66,7 @@ export const mobileMediaQuery = css`
       padding-top: 29px;
       margin-bottom: 34px;
       height: 170px;
+
 
       .card-content {
         justify-content: flex-start;
@@ -85,18 +86,36 @@ export const mobileMediaQuery = css`
       .card-info-container {
         margin-top: 55px;
       }
+
+        .sub-text {
+        margin-top: -36px;
+      }
     }
   }
 
-  @media (max-width: 390px) {
+  @media (max-width: 393px) {
  .card-content {
-        margin-top: 13px;
+        margin-top: -3px;
+        padding-top: 12px;
       }
   }
 
-    @media (max-width: 393px) {
-    .card-content {
-        margin-top: 12px;
-    }
-    }
+    @media (max-width: 414px) {
+ .card-content {
+        padding-top: 20px;
+        margin-top: -1px;
+      }
+
+      .sub-text {
+        margin-top: -36px;
+      }
+
+      .top-card {
+        padding-top: 21px;
+      }
+
+      .content-card {
+        margin-bottom: 23px;
+      }
+  }
 `;