Fix small-screen button links

cfpb · Jan 7, 2016 · 0ae3d46 · 0ae3d46
1 parent bd9e6c9
commit 0ae3d46
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/paying_for_college/templates/worksheet.html b/paying_for_college/templates/worksheet.html
@@ -8,15 +8,14 @@
 {% endblock %}
 {% block app_css %}
 <!--[if lt IE 9]>
-    <link rel="stylesheet" href="{% static
-    "paying_for_college/disclosures/static/css/main.ie.css" %}">
+    <link rel="stylesheet" href="{% static "paying_for_college/disclosures/static/css/main.ie.css" %}">
 <![endif]-->
 <!--[if gt IE 8]><!-->
     <link rel="stylesheet" href="{% static "paying_for_college/disclosures/static/css/main.min.css" %}">
 <!--<![endif]-->
 {% endblock %}
 {% block responsive_nav %}
-<a class="toggle-menu" href="#"><i class="cf-icon cf-icon-menu"></i
+<a class="toggle-menu" href="#"><i class="cf-icon cf-icon-menu"></i>
     <span class="u-visually-hidden">Menu</span></a>
 {% endblock %}
 {% block content %}
@@ -119,13 +118,13 @@ <h2 class="verify_prompt">
                             </div>
                             <div class="verify_controls">
                                 <a href="#info-right"
-                                class="btn btn__full-small" type="button"
+                                class="btn btn__full-small"
                                 title="Yes, this information is correct">
                                     Yes, this is correct
                                 </a>
                                 <a href="#info-wrong"
                                 class="btn btn__full-small btn__link
-                                verify_wrong-info-btn" type="button"
+                                verify_wrong-info-btn"
                                 title="No, this is not my information">
                                     No, this is not my information
                                 </a>

diff --git a/src/disclosures/css/cf-enhancements.less b/src/disclosures/css/cf-enhancements.less
@@ -18,6 +18,7 @@
   .respond-to-max(@bp-xs-max, {
     display: block;
     width: 100%;
+    text-align: center;
   });
 
   &.btn__link {
@@ -37,6 +38,13 @@
   }
 }
 
+a.btn__full-small.btn__link {
+
+  .respond-to-max(@bp-xs-max, {
+    display: inline-block;
+  });
+}
+
 /* ==========================================================================
    Flush left lists
    ========================================================================== */

diff --git a/src/disclosures/css/disclosures.less b/src/disclosures/css/disclosures.less
@@ -168,9 +168,11 @@
 
   &_controls {
     margin-top: unit(30px / @base-font-size-px, em);
+    text-align: center;
 
     .respond-to-min(@bp-sm-min, {
       .grid_column(12);
+      text-align: left;
     });
   }