KPMP-5224: adjusted homepage containers to align their edges

KPMP · Apr 24, 2024 · 7b56b3c · 7b56b3c
1 parent 85935ca
commit 7b56b3c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -13,6 +13,8 @@ class Home extends Component {
           <Col md='12' lg='12'>
             <TopContent/>
           </Col>
+        </Row>
+        <Row>
           <Col md='12' lg='4'>
             <LeftContent />
           </Col>

diff --git a/src/components/Home/LeftContent.js b/src/components/Home/LeftContent.js
@@ -13,7 +13,7 @@ class LeftContent extends Component {
   }
   render() {
     return (
-      <Row>
+      <div style={{marginRight: '15px'}}>
         <Container className="mt-3 rounded border p-3 shadow-sm">
           <h5>Explorer</h5>
           <div>
@@ -60,7 +60,7 @@ class LeftContent extends Component {
             <Button className="w-100" color='primary' href='https://www.kpmp.org/collaboration' size='lg' block onClick={() => { this.handleGoogleAnalyticsEvent('Atlas Home', 'Navigation', 'collaborate') }}>Collaborate with us</Button>
           </div>
         </Container>
-      </Row>
+      </div>
     );
   }
 }

diff --git a/src/index.scss b/src/index.scss
@@ -457,9 +457,8 @@ tr.MuiTableRow-root:nth-child(even) {
 
 #homepage {
   @media (min-width: 990px) {
-    .container-expanded {
-      max-width: 98.75%;
-      margin-left: 15px;
+    .container {
+      max-width: 100%;
     }
   }
   @media (max-width: 635px) {