change back button positions mostly for mobile

nopara73 · nopara73 · commit 2e300d4d5db5 · 2024-12-27T09:49:41.000+01:00
diff --git a/LongevityWorldCup.Website/wwwroot/onboarding/convergence.html b/LongevityWorldCup.Website/wwwroot/onboarding/convergence.html
@@ -131,6 +131,12 @@
             border-radius: 3px;
             cursor: pointer;
         }
+
+        /* Must use important because back button styles applied later. Without important it doesn't overwrite it. */
+        .back-button {
+            margin-right: auto !important;
+            margin-left: 0 !important; /* Resets left margin */
+        }
     </style>
 </head>
 <body>
diff --git a/LongevityWorldCup.Website/wwwroot/onboarding/pheno-age.html b/LongevityWorldCup.Website/wwwroot/onboarding/pheno-age.html
@@ -77,6 +77,14 @@
                 width: auto;
                 min-width: var(--unit-select-min-width, auto); /* Placeholder variable for dynamic width */
             }
+
+        @media (max-width: 768px) {
+            /* Must use important because back button styles applied later. Without important it doesn't overwrite it. */
+            .back-button {
+                margin-right: auto !important;
+                margin-left: 0 !important; /* Resets left margin */
+            }
+        }
     </style>
 </head>
 <body>
@@ -386,10 +394,10 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
             // Setting up the animated counter effect
             let displayAge = 0;
             resultElement.innerHTML = `
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div style="font-size: 1rem; color: #2c3e50; text-align: center;">Your biological age is:</div>
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div style="font-size: 2.5rem; color: #4CAF50; font-weight: bold; text-align: center;"><span id="animatedAge">0</span></div>
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div id="yearsText" style="font-size: 1rem; color: #2c3e50; text-align: center;">years</div>
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    `;
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div style="font-size: 1rem; color: #2c3e50; text-align: center;">Your biological age is:</div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div style="font-size: 2.5rem; color: #4CAF50; font-weight: bold; text-align: center;"><span id="animatedAge">0</span></div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div id="yearsText" style="font-size: 1rem; color: #2c3e50; text-align: center;">years</div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            `;
 
             if (isFirstTimeAnimation) {
                 // Set the flag to false after the first run
diff --git a/LongevityWorldCup.Website/wwwroot/onboarding/waiting-for-lab.html b/LongevityWorldCup.Website/wwwroot/onboarding/waiting-for-lab.html
@@ -24,6 +24,14 @@
                 transform: scale(1.03); /* Slight hover enlarge effect */
                 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
             }
+
+        @media (max-width: 768px) {
+            /* Must use important because back button styles applied later. Without important it doesn't overwrite it. */
+            .back-button {
+                margin-right: auto !important;
+                margin-left: 0 !important; /* Resets left margin */
+            }
+        }
     </style>
 
     <script>
