Correction of the Landsacape mobile again!

SAEON · Aug 30, 2023 · 33b0dd5 · 33b0dd5
1 parent a53d0c3
commit 33b0dd5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/index.css b/index.css
@@ -218,7 +218,7 @@
   padding-bottom: var(--dl-space-space-tenunits);
   justify-content: center;
 }
-.home-container3 {
+.home-container1-about-us {
   width: 481px;
   display: flex;
   align-items: flex-start;
@@ -227,7 +227,7 @@
   flex-direction: column;
   justify-content: center;
 }
-.home-container4 {
+.home-container2-about-us {
   width: 1239px;
   height: auto;
   display: flex;
@@ -354,7 +354,7 @@
   color: var(--dl-color-gray-black);
   text-align: center;
 }
-.home-container5 {
+.home-container3 {
   flex: 0 0 auto;
   width: 100%;
   height: 100px;
@@ -715,10 +715,10 @@
     width: auto;
     height: auto;
   }
-  .home-container3 {
+  .home-container1-about-us {
     flex-direction: column;
   }
-  .home-container4 {
+  .home-container2-about-us {
     width: 960px;
     height: auto;
   }
@@ -751,7 +751,7 @@
   .home-text58 {
     color: var(--dl-color-gray-black);
   }
-  .home-container5 {
+  .home-container3 {
     padding-top: 8px;
     padding-left: 8px;
     padding-right: 8px;
@@ -833,13 +833,13 @@
     width: 1189px;
     height: 2140px;
   }
-  .home-container3 {
+  .home-container1-about-us {
     flex-direction: column;
   }
   .home-text11 {
     align-self: center;
   }
-  .home-container4 {
+  .home-container2-about-us {
     width: 729px;
   }
   .home-image {
@@ -879,13 +879,13 @@
     max-width: 100%;
     flex-direction: column;
   }
-  .home-container3 {
+  .home-container1-about-us {
     width: 955px;
   }
   .home-text12 {
     padding-bottom: var(--dl-space-space-doubleunit);
   }
-  .home-container4 {
+  .home-container2-about-us {
     width: 100%;
   }
   .home-card-content1 {
@@ -946,11 +946,12 @@
     height: 2459px;
     align-items: center;
   }
-  .home-container3 {
+  .home-container1-about-us {
     width: 100%;
     height: auto;
+    padding-top: var(--dl-space-space-tenunits);
   }
-  .home-container4 {
+  .home-container2-about-us {
     width: 100%;
   }
   .home-text41 {
@@ -1010,7 +1011,7 @@
   }
   .home-link {
     color: var(--dl-color-primary-100);
-    height: 52px;
+    height: auto;
     font-style: normal;
     text-align: center;
     font-weight: 700;
@@ -1060,7 +1061,7 @@
     padding-left: var(--dl-space-space-tripleunit);
     padding-bottom: var(--dl-space-space-tenunits);
   }
-  .home-container3 {
+  .home-container1-about-us {
     width: 100%;
     height: auto;
   }
@@ -1070,6 +1071,7 @@
     margin-left: var(--dl-space-space-unit);
     padding-top: 0px;
     margin-bottom: var(--dl-space-space-doubleunit);
+    padding-bottom: var(--dl-space-space-tenunits);
   }
   .home-text12 {
     padding-top: var(--dl-space-space-fiveunits);

diff --git a/index.html b/index.html
@@ -126,7 +126,7 @@ <h1 class="home-text08">
         </div>
         <div class="home-section-separator"></div>
         <div id="about-us" class="home-about-us">
-          <div class="home-container3">
+          <div class="home-container1-about-us">
             <h1 class="content-header home-text11">
               Sustainable Ocean Modelling Initiative: a South African Approach
               (SOMISANA)&nbsp;
@@ -143,7 +143,7 @@ <h1 class="content-header home-text11">
               of the ocean that supports coastal resilience.
             </span>
           </div>
-          <div class="home-container4 content-header">
+          <div class="home-container2-about-us content-header">
             <img
               alt="image"
               src="public/pyramid_diagram4-1500w.jpg"
@@ -376,7 +376,7 @@ <h2 class="home-text52 Section-Heading">People</h2>
             </div>
           </div>
         </div>
-        <div class="home-container5">
+        <div class="home-container3">
           <a
             href="https://www.ocims.gov.za/"
             target="_blank"