Merge pull request #465 from consensusnetworks/update/mobile-view

Minor changes to class names
consensusnetworks · Nov 21, 2023 · 2e05e9b · 2e05e9b
2 parents 84aef1a + eb11e88
commit 2e05e9b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/apps/landing/src/index.css b/apps/landing/src/index.css
@@ -150,13 +150,29 @@
   margin: 120px auto 0 auto;
 }
 
+.bento__mobile {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 60px;
+  margin: 80px auto 0 auto;
+}
+
 .bento__container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 25px;
   width: 100%;
 }
 
+.bento__container__mobile {
+  /* width: 100%; */
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
 .bento__base__card {
   display: flex;
   flex-direction: column;
@@ -1098,4 +1114,4 @@ ul li {
 .newsletter input:focus {
   outline: none;
   border: 1px solid #eaecf0;
-}
+}
diff --git a/apps/landing/src/pages/landing/Landing.vue b/apps/landing/src/pages/landing/Landing.vue
@@ -240,24 +240,21 @@ const toggleQuestionItem = (index: number) => {
     </section>
 
     <!-- Hide this section on small screens for now -->
-    <section class="bento md-lg:hidden">
+    <section class="bento__mobile md-lg:hidden">
       <div class="overview__header">
-        <h2 class="csm:hidden">
-          One place to connect your wallets, <br> stake, withdraw, and see your analytics.
-        </h2>
         <h2 class="md-lg:hidden">
           One place to connect your wallets, stake, withdraw, and see your analytics.
         </h2>
       </div>
-      <div class="bento__container">
+      <div class="bento__container__mobile">
         <div class="bento__base__card bento__card__1">
           <h2 class="text-6">
-            Track all of your historical balances, rewards, and  <br> withdrawals in one dashboard.
+            Connect any number of wallets at the same time.
           </h2>
-          <div><img src="/analytics-chart.png"></div>
+          <div><img src="/multi-wallet.png"></div>
         </div>
 
-        <div class="bento__base__card bento__card__4">
+        <div class="bento__base__card bento__card__2">
           <h2 class="text-6">
             Natively stake or withdraw ETH.
           </h2>
@@ -266,16 +263,16 @@ const toggleQuestionItem = (index: number) => {
 
         <div class="bento__base__card bento__card__3">
           <h2 class="text-6">
-            Get your transaction history <br> for any connected address.
+            Track all of your historical balances, rewards, and  <br> withdrawals in one dashboard.
           </h2>
-          <div><img src="/tx.png"></div>
+          <div><img src="/analytics-chart.png"></div>
         </div>
 
-        <div class="bento__base__card bento__card__2">
+        <div class="bento__base__card bento__card__4">
           <h2 class="text-6">
-            Connect any number of wallets at the same time.
+            Get your transaction history <br> for any connected address.
           </h2>
-          <div><img src="/multi-wallet.png"></div>
+          <div><img src="/tx.png"></div>
         </div>
       </div>
     </section>