responsive fixes

packages/fakeyou/src/scss/site-refresh.scss

@@ -110,7 +110,7 @@ styles with important tags:
 
   .lead {
     color: rgba($white, 0.8);
-    font-size: 18px;
+    font-size: 17px;
   }
 
   .text-red {

packages/fakeyou/src/v2/view/clone_voice_requests/VoiceCloneRequestPage.tsx

@@ -291,7 +291,7 @@ function VoiceCloneRequestPage(props: Props) {
                 </Fade>
               </div>
             </div>
-            <div className="col-lg-6 px-md-2 px-lg-5 px-xl-2">
+            <div className="col-lg-6 px-3 px-md-2 px-lg-5 px-xl-2">
               <Fade bottom cascade distance={distance} duration={duration}>
                 <div className="text-center text-lg-start">
                   <h1 className="display-5 fw-bold lh-1">
@@ -299,7 +299,9 @@ function VoiceCloneRequestPage(props: Props) {
                   </h1>
                   <h3 className="mb-4">(or any voice) for just $70</h3>
                   <div className="d-flex flex-column justify-content-center">
-                    <h3>Want a Custom Voice You Can Use?</h3>
+                    <h3 className="px-5 px-md-0">
+                      Want a Custom Voice You Can Use?
+                    </h3>
                     <p className="lead">
                       For Music, Videos, Twitch Rewards, API, Friends, Family…
                       whatever you want!

packages/fakeyou/src/v2/view/contribute/ContributeIndexPage.tsx

@@ -123,9 +123,9 @@ function ContributeIndexPage(props: Props) {
 
   return (
     <div>
-      <div className="container py-5 pb-4 pb-lg-5">
+      <div className="container py-5 pb-4 pb-lg-5 px-md-4 px-lg-5 px-xl-3">
         <Fade bottom cascade duration={duration} distance={distance}>
-          <div className="d-flex flex-column text-center text-lg-start">
+          <div className="d-flex flex-column">
             <h1 className="display-5 fw-bold">
               {t("pages.contributeIndex.heroTitle")}
             </h1>

packages/fakeyou/src/v2/view/firehose/FirehoseEventListFc.tsx

@@ -299,7 +299,7 @@ function FirehoseEventListFc(props: Props) {
 
   return (
     <div>
-      <div className="container py-5">
+      <div className="container py-5 px-md-4 px-lg-5 px-xl-3">
         <Fade bottom cascade duration={duration} distance={distance}>
           <div className="d-flex flex-column">
             <h1 className="display-5 fw-bold">Firehose Event Feed</h1>

packages/fakeyou/src/v2/view/patrons/PatronPage.tsx

@@ -79,12 +79,14 @@ function PatronPage(props: Props) {
 
   return (
     <div>
-      <div className="container py-5 ps-3 pt-lg-0 ps-md-5 ps-lg-3">
+      <div className="container py-5 pt-lg-0">
         <div className="row">
           <Fade bottom cascade duration={duration} distance={distance}>
-            <div className="col-12 col-lg-7 d-flex flex-column justify-content-center text-center text-lg-start">
+            <div className="col-12 col-lg-7 d-flex flex-column justify-content-center text-center text-lg-start px-3 px-md-2 px-lg-5 px-xl-3">
               <h1 className="display-5 fw-bold">Thanks to our Patrons!</h1>
-              <h3 className="mb-4">Our Patrons help support our work.</h3>
+              <h3 className="mb-4 px-4 px-md-0">
+                Our Patrons help support our work.
+              </h3>
               <p className="lead mb-5">
                 Our Patrons help pay offset (but not completely cover) our
                 expensive server bills.

packages/fakeyou/src/v2/view/w2l/w2l_template_list/W2lTemplateListFc.tsx

@@ -170,29 +170,30 @@ function W2lTemplateListFc(props: Props) {
 
         <br />
 
-        {allRowsOfTemplateElements.map(el => el)}
+        {allRowsOfTemplateElements.map((el) => el)}
 
         <br />
 
-        <p>This feature is based on Wav2Lip by by Prajwal, K R and Mukhopadhyay,
-          Rudrabha and Namboodiri, Vinay P. and Jawahar, C.V.</p>
+        <p>
+          This feature is based on Wav2Lip by by Prajwal, K R and Mukhopadhyay,
+          Rudrabha and Namboodiri, Vinay P. and Jawahar, C.V.
+        </p>
 
         <br />
-
       </div>
     );
   }
 
   return (
     <div>
-      <Fade bottom cascade duration={duration} distance={distance}>
-        <div className="container py-5">
+      <div className="container py-5 px-md-4 px-lg-5 px-xl-3">
+        <Fade bottom cascade duration={duration} distance={distance}>
           <div>
             <h1 className="display-5 fw-bold mb-3">Video Lip Sync Templates</h1>
+            {extraDetails}
           </div>
-          <div>{extraDetails}</div>
-        </div>
-      </Fade>
+        </Fade>
+      </div>
 
       <div className="container">
         {allRowsOfTemplateElements.map((el) => el)}