feat(enrollment-index): use col-lg-6 for heading, content and set bas…

…e cta to col-lg-6 width
cal-itp · Dec 6, 2024 · 8d802b5 · 8d802b5
1 parent 4da58e9
commit 8d802b5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 20 deletions.
diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
@@ -87,8 +87,8 @@
             {% endblock inner-content %}
           </div>
           {% block call-to-action %}
-            <div class="row d-flex justify-content-lg-end pt-8">
-              <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+            <div class="row d-flex justify-content-center pt-8">
+              <div class="col-12 col-lg-6">
                 {% block call-to-action-button %}
                 {% endblock call-to-action-button %}
               </div>

diff --git a/benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html b/benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html
@@ -6,14 +6,12 @@
 {% endblock heading %}
 
 {% block body %}
-    <div class="media-body--details">
-        <p>
-            {% translate "You will be directed to our partner, " %}
-            <!-- djlint:off --><a href="modal--littlepay" class="{{ classes }}" data-bs-toggle="modal" data-bs-target="#modal--littlepay">Littlepay</a>{% translate ", to enter your contactless card details." %}<!-- djlint:on -->
-            {% translate "We don’t store your information, and you won’t be charged." %}
-        </p>
-        <p>{% translate "Please use a debit or credit card by Visa or Mastercard." %}</p>
-    </div>
+    <p>
+        {% translate "You will be directed to our partner, " %}
+        <!-- djlint:off --><a href="modal--littlepay" class="{{ classes }}" data-bs-toggle="modal" data-bs-target="#modal--littlepay">Littlepay</a>{% translate ", to enter your contactless card details." %}<!-- djlint:on -->
+        {% translate "We don’t store your information, and you won’t be charged." %}
+    </p>
+    <p class="pt-4">{% translate "Please use a debit or credit card by Visa or Mastercard." %}</p>
 
     {% include "enrollment/includes/modal--littlepay.html" with id="modal--littlepay" size="modal-md" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
 {% endblock body %}
diff --git a/benefits/enrollment/templates/enrollment/index--agency-card.html b/benefits/enrollment/templates/enrollment/index--agency-card.html
@@ -2,9 +2,7 @@
 {% load i18n %}
 
 {% block headline %}
-  <div class="col-lg-8">
-    <h1 class="pb-lg-8 pb-4">
-      {% translate "We found your record!<br>Now let’s enroll your contactless card." %}
-    </h1>
+  <div class="col-lg-6">
+    <h1 class="pb-lg-8 pb-4">{% translate "We found your record! Now let’s enroll your contactless card." %}</h1>
   </div>
 {% endblock headline %}
diff --git a/benefits/enrollment/templates/enrollment/index.html b/benefits/enrollment/templates/enrollment/index.html
@@ -12,17 +12,15 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <div class="col-lg-8">
-    <h1 class="pb-lg-8 pb-4">
-      {% translate "Your eligibility is confirmed!<br>You’re almost there." %}
-    </h1>
+  <div class="col-lg-6">
+    <h1 class="pb-lg-8 pb-4">{% translate "Your eligibility is confirmed! You’re almost there." %}</h1>
   </div>
 {% endblock headline %}
 
 {% block inner-content %}
   {% block media-items %}
-    <div class="col-12 col-sm-12 col-lg-8">
-      <ul class="d-flex list-unstyled ps-0 pb-5 mb-3">
+    <div class="col-12 col-lg-6">
+      <ul class="d-flex list-unstyled ps-0 mb-0">
         {% include "enrollment/includes/media-item--contactless-card--index.html" %}
       </ul>
     </div>