Fix responsive issues in solutions page

Signed-off-by: mohin7 <[email protected]>
appscode · Sep 13, 2024 · 29a7151 · 29a7151
1 parent ecd8390
commit 29a7151
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 14 deletions.
diff --git a/data/events.json b/data/events.json
@@ -28,10 +28,10 @@
   },
   {
       "id":"4",
-      "date": "NOV 03 - 04, 2024",
-      "sort_date": "2024-11-03",
-      "title": "4 ContainerDays Conference",
-      "description": "The CDS family grows every year and you can't miss this fantastic learning experience...",
+      "date": "NOV 12 - 15, 2024",
+      "sort_date": "2024-11-12",
+      "title": "KubeCon North America",
+      "description": "The Cloud Native Computing Foundation’s flagship conference gathers adopters and technologists from leading open source and cloud native communities in Salt Lake City, Utah from November 12-15, 2024. Join our CNCF Graduated and Incubating Projects as the community gathers for four days to further the education and advancement of cloud native computing.",
       "meet_with_us": "https://appscode.com/contact/",
       "event_details": "https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/",
       "show": true

diff --git a/hugo_stats.json b/hugo_stats.json
@@ -226,16 +226,21 @@
       "is-12",
       "is-3",
       "is-4",
+      "is-4-dekstop",
       "is-4-desktop",
       "is-48x48",
       "is-5",
+      "is-5-desktop",
       "is-6",
       "is-6-desktop",
       "is-6-tablet",
       "is-64x64",
       "is-7",
       "is-8",
+      "is-8-dekstop",
       "is-8-desktop",
+      "is-8-touch",
+      "is-8-until-fullhd",
       "is-8-widescreen",
       "is-9",
       "is-active",

diff --git a/layouts/_default/solutions.html b/layouts/_default/solutions.html
@@ -7,7 +7,7 @@
     <section class="hero-area">
         <div class="container">
         <div class="columns is-centered">
-            <div class="column is-5 has-text-centered">
+            <div class="column is-6-desktop is-8-until-fullhd has-text-centered">
                 <h1 class="is-gradient">AppsCode solutions Speed up your cloud journey</h1>
             </div>
         </div>

diff --git a/layouts/partials/components/solution.html b/layouts/partials/components/solution.html
@@ -8,8 +8,8 @@ <h2>{{ .tagline }}</h2>
               </div>
           </div>
       </div> -->
-      <div class="columns is-vcentered">
-          <div class="column is-4">
+      <div class="columns is-multiline is-vcentered">
+          <div class="column is-full-touch is-4-dekstop">
               <div class="left-content">
                   <img src="{{ .ProductData.logo.src }}" alt="{{ .ProductData.fullname}}">
                   <h3>{{ .ProductData.tagline | plainify  }}</h3>
@@ -25,7 +25,7 @@ <h3>{{ .ProductData.tagline | plainify  }}</h3>
               </div>
           </div>
 
-          <div class="column is-8">
+          <div class="column is-full-touch is-8-dekstop">
               <div class="right-content">
                   {{range $feature := .ProductData.features}}
                   <a href="{{index $siteName $domainKey}}/features" class="single-card">

diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css
@@ -25978,14 +25978,35 @@ Responsive Classes
 
 .single-solution {
   background-color: #ffffff;
-  margin-inline: 100px;
   border-radius: 16px;
   margin-bottom: 32px;
   box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
+  width: calc(100% - 200px);
+  margin: 0 auto 32px auto;
+}
+@media (min-width: 1400px) and (max-width: 1600px) {
+  .single-solution {
+    width: calc(100% - 50px);
+  }
+}
+@media (min-width: 1250px) and (max-width: 1399px) {
+  .single-solution {
+    width: calc(100% - 32px);
+  }
+}
+@media (min-width: 1100px) and (max-width: 1249px) {
+  .single-solution {
+    width: 100%;
+  }
+}
+@media (min-width: 1024px) and (max-width: 1199px) {
+  .single-solution {
+    width: calc(100% - 32px);
+  }
 }
 @media screen and (max-width: 1023px) {
   .single-solution {
-    margin-inline: 0;
+    width: calc(100% - 32px);
   }
 }
 .single-solution .left-content img {

diff --git a/static/assets/sass/pages/_solutions.scss b/static/assets/sass/pages/_solutions.scss
@@ -28,14 +28,30 @@
 }
 .single-solution {
   background-color: $ac-white;
-  margin-inline: 100px;
   border-radius: 16px;
   margin-bottom: 32px;
   box-shadow: 1px 2px 10px rgba(0,0,0,.1);
+  width: calc(100% - 200px);
+  margin: 0 auto 32px auto;
 
-  @include touch {
-    margin-inline: 0;
-  }
+  @media (min-width: 1400px) and (max-width: 1600px) {
+    width: calc(100% - 50px);
+  } 
+
+  @media (min-width: 1250px) and (max-width: 1399px) {
+    width: calc(100% - 32px);
+  } 
+
+  @media (min-width: 1100px) and (max-width: 1249px) {
+    width: 100%;
+  } 
+
+  @media (min-width: 1024px) and (max-width: 1199px) {
+    width: calc(100% - 32px);
+  } 
+  @media screen and (max-width: 1023px) {
+    width: calc(100% - 32px);
+  } 
 
   .left-content {
     img {