Some css and other styles adjustments (breakpoints, etc.)

nvisionative · Jul 9, 2024 · f81ae56 · f81ae56
1 parent b1bd598
commit f81ae56
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/components/nvq-loan-calculator/nvq-loan-calculator.scss b/src/components/nvq-loan-calculator/nvq-loan-calculator.scss
@@ -46,7 +46,7 @@
   justify-content: center;
   align-items: stretch;
   color: var(--background-color-contrast);
-  @media (max-width: 48em){
+  @media (max-width: 62em){
     flex-direction: column;
     align-items: stretch;
     width: 100%;
@@ -55,7 +55,7 @@
   >div{
     flex: 1 0 33%;
     box-shadow: 0 16px 38px -12px var(--shadow-color);
-    @media (max-width: 48rem){
+    @media (max-width: 62rem){
       flex-basis: 100%;
       transform: scale(1);
       margin-bottom: 1em;
@@ -79,7 +79,7 @@
     color: var(--calculator-color-contrast);
     display: flex;
     flex-direction: column;
-    @media (min-width: 48em){
+    @media (min-width: 62em){
       transform: scale(1.05);
     }
     label{
@@ -172,13 +172,19 @@
     justify-content: center;
     h4{
       font-size: 1.5em;
+      @media (max-width: 62em){
+        margin: 0.25em 0;
+      }
     }
     .output{
       font-size: 3em;
       font-weight: 800;
     }
     .disclaimer{
       margin-top: 50%;
+      @media (max-width: 62em){
+        margin-top: 0;
+      }
       text-align: center;
     }
   }

diff --git a/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx b/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx
@@ -216,14 +216,15 @@ export class NvqLoanCalculator {
         </div>
         <div class="result">
           <h4 class="text-center">{this.monthlyPaymentLabel}<sup>‡</sup></h4>
-          <span class="output">{this.calculatePayment()}$</span>
-            <p class="disclaimer mb-4"><sup>‡</sup>{this.monthlyPaymentDisclaimer}</p>
+          <span class="output">${this.calculatePayment()}</span>
+            <p class="disclaimer"><sup>‡</sup>{this.monthlyPaymentDisclaimer}</p>
         </div>
       </div>
       <slot name="footnote">
+        <hr />
         <p>
           <small>
-            <sup>*</sup> Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.
+            * Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.
           </small>
         </p>
       </slot>

diff --git a/src/index.html b/src/index.html
@@ -81,9 +81,10 @@ <h5>Example B:</h5>
         </div>
       </div>
       <div slot="footnote">
+        <hr />
         <p>
           <small>
-            <sup>*</sup> Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.
+            * Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.
           </small>
         </p>
       </div>