From 8a7fcd5c85e97cb18f183f6dd010f7e5a43ada5c Mon Sep 17 00:00:00 2001
From: nottnottloop <6772127+nottnottloop@users.noreply.github.com>
Date: Sat, 16 Dec 2023 20:38:10 +0000
Subject: [PATCH] Improve responsiveness for mobile screens for sites with
 large site stats

---
 sass/_project-sass/_project-Main.scss | 49 ++++++++++++++++++++-------
 views/site.erb                        |  6 ++--
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index 9fb1f546..a15ac13b 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -1127,6 +1127,25 @@ a.tag:hover {
     margin-left: 0;
   }
 }
+
+.interior .header-Outro .col.col-50.signup-Area.site-display-preview-wrapper {
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    padding: 0 7%;
+  }
+}
+
+.interior .header-Outro .site-display-preview {
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    margin: 0 auto 5px;
+  }
+}
+
+.interior .header-Outro .site-info-row {
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    padding: 20px 0%;
+  }
+}
+
 .interior .header-Outro .stats {
   margin-bottom: 1.3em;
   float: left;
@@ -1134,18 +1153,32 @@ a.tag:hover {
   margin-top: 1.9em;
 
   @media (max-device-width:480px), screen and (max-width:800px) {
-    float: none;
-    width: 270px;
-    margin: 0.9em auto 5.5em auto;
     text-align: center;
+    margin-top: 0.5em;
+    display: flex;
+    justify-content: center;
   }
 }
+
 .interior .header-Outro .stats .tips {
   @media (max-device-width:480px), screen and (max-width:800px) {
     display: none;
   }
 }
 
+.interior .header-Outro .stats .stat {
+  float: left;
+  text-align: center;
+  margin-right: 28px;
+  color: #84997E;
+
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    margin: 0;
+    width: fit-content;
+    min-width: 90px;
+  }
+}
+
 .interior .header-Outro .stats strong {
   font-size: 1.5em;
   font-weight: normal;
@@ -1157,17 +1190,7 @@ a.tag:hover {
   clear: both;
   display: block;
 }
-.interior .header-Outro .stats .stat {
-  float: left;
-  text-align: center;
-  margin-right: 28px;
-  color: #84997E;
 
-  @media (max-device-width:480px), screen and (max-width:800px) {
-    margin: 0;
-    width: 90px;
-  }
-}
 .interior .header-Outro .stats .stat.tips {
   width: 60px;
 }
diff --git a/views/site.erb b/views/site.erb
index bbbd2c35..d58f81a5 100644
--- a/views/site.erb
+++ b/views/site.erb
@@ -8,9 +8,9 @@
       </div>
     </div>
   <% end %>
-  <div class="row content">
-    <div class="col col-50 signup-Area large">
-      <div class="signup-Form">
+  <div class="row content site-info-row">
+    <div class="col col-50 signup-Area site-display-preview-wrapper large">
+      <div class="signup-Form site-display-preview">
   	  <fieldset class="content">
         <a href="<%= site.uri %>" class="screenshot" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a>
 	    </fieldset>