This is an automated email from the ASF dual-hosted git repository.

jiayu pushed a commit to branch branch-1.7.1
in repository https://gitbox.apache.org/repos/asf/sedona.git

commit a1e1cc1bfd8a11aee6392222564f5e2f11b11b17
Author: Furqaan Khan <[email protected]>
AuthorDate: Wed Apr 9 14:45:03 2025 -0400

    [GH-1495] Fix homepage layout bug in mobile view (#1913)
    
    * make some parts of the home page mobile friendly
    
    * better mobile friendliness and reduce margin to 5%
---
 docs-overrides/main.html | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/docs-overrides/main.html b/docs-overrides/main.html
index ed0b9639af..914e244d35 100644
--- a/docs-overrides/main.html
+++ b/docs-overrides/main.html
@@ -19,11 +19,31 @@
   {% if page.is_homepage %}
   <!-- {{ super() }} -->
   <style>
-    
.md-header{position:initial}.md-main__inner{margin-left:15%}.md-content{display:display}@media
 screen and (min-width:60em){.md-sidebar--secondary{display:display}}@media 
screen and (min-width:76.25em){.md-sidebar--primary{display:none}}
+    
.md-header{position:initial}.md-main__inner{margin-left:5%}.md-content{display:display}@media
 screen and (min-width:60em){.md-sidebar--secondary{display:display}}@media 
screen and (min-width:76.25em){.md-sidebar--primary{display:none}}
     .br {
             display: block;
             margin-bottom: 14em;
         }
+    .responsive-container {
+      display: grid;
+      grid-template-columns: 44% 56%;
+      grid-gap: 20px;
+    }
+    .responsive-text {
+      grid-column: 1;
+    }
+    .responsive-img {
+     grid-column: 2;
+    }
+
+    @media (max-width: 490px) {
+      .responsive-container {
+        grid-template-columns: 100%;
+      }
+      .responsive-text , .responsive-img {
+        grid-column: 1;
+      }
+    }
 </style>
     <section class="tx-container">
       <div class="md-grid md-typeset">
@@ -62,11 +82,11 @@
 
           <div class="tx-hero__content">
             <h1>High Speed</h1>
-            <div style="width: 100%;">
-              <div style="width: 45%; height: 160px; float: left;">
+            <div class="responsive-container">
+              <div class="responsive-text">
                 According to <a href="./community/publication/">our benchmark 
and third-party research papers</a>, Sedona runs 2X - 10X faster than other 
Spark-based geospatial data systems on computation-intensive query workloads.
               </div>
-              <div style="margin-left: 45%; height: 160px;">
+              <div class="responsive-img">
                 <figure>
                     <img src="image/jointime.png" width="350">
                     <figcaption>Execution time of spatial join with 
polygons</figcaption>
@@ -79,11 +99,11 @@
 
           <div class="tx-hero__content">
             <h1>Low Memory Consumption</h1>
-            <div style="width: 100%;">
-              <div style="width: 45%; height: 160px; float: left;">
+            <div class="responsive-container">
+              <div class="responsive-text">
                 According to <a href="./community/publication/">our benchmark 
and third-party research papers</a>, Sedona has 50% less peak memory 
consumption than other Spark-based geospatial data systems for large-scale 
in-memory query processing.
               </div>
-              <div style="margin-left: 45%; height: 160px;">
+              <div class="responsive-img">
                 <figure>
                     <img src="image/joinmem.png" width="350">
                     <figcaption>Peak memory consumption of spatial join with 
polygons</figcaption>
@@ -96,11 +116,11 @@
 
           <div class="tx-hero__content">
             <h1>Ease of Use</h1>
-            <div style="width: 100%;">
-              <div style="width: 45%; height: 160px; float: left;">
+            <div class="responsive-container">
+              <div class="responsive-text">
                 Sedona offers Scala, Java, Spatial SQL, Python, and R APIs and 
integrates them into underlying system kernels with care. You can simply create 
spatial analytics and data mining applications and run them in any cloud 
environments.
               </div>
-              <div style="margin-left: 45%; height: 160px;">
+              <div class="responsive-img">
 <pre class="hljs" style="display: block; overflow-x: auto; background: 
rgb(235, 248, 255); color: rgb(81, 109, 123); padding: 0.5em;"><span 
class="hljs-keyword" style="color: rgb(107, 107, 184);">SELECT</span> 
superhero.name
 <span class="hljs-keyword" style="color: rgb(107, 107, 184);">FROM</span> 
city, superhero
 <span class="hljs-keyword" style="color: rgb(107, 107, 184);">WHERE</span> 
ST_Contains(city.geom, superhero.geom)

Reply via email to