Set margin/padding properly on mobile breadcrumbs

cfpb · Jan 31, 2025 · 88ffa84 · 88ffa84
1 parent 1358275
commit 88ffa84
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 15 deletions.
diff --git a/cfgov/tccp/jinja2/tccp/cards.html b/cfgov/tccp/jinja2/tccp/cards.html
@@ -31,10 +31,6 @@
 <link rel="stylesheet" href="{{ static('apps/tccp/css/main.css') }}">
 {% endblock %}
 
-{% block content_modifiers -%}
-    {{ super() }} u-layout-grid--full-width-breadcrumbs
-{%- endblock %}
-
 {% block content_main_modifiers -%}
     {{ super() }} htmx-container
 {%- endblock %}

diff --git a/cfgov/unprocessed/css/enhancements/layout-base.scss b/cfgov/unprocessed/css/enhancements/layout-base.scss
@@ -46,10 +46,10 @@
     // Tablet and below.
     @include respond-to-max($bp-sm-max) {
       &__breadcrumbs {
-        padding-left: math.div(30px, $base-font-size-px) + rem;
-        padding-right: math.div(30px, $base-font-size-px) + rem;
-        margin-left: math.div(-30px, $base-font-size-px) + rem;
-        margin-right: math.div(-30px, $base-font-size-px) + rem;
+        padding-left: math.div(15px, $base-font-size-px) + rem;
+        padding-right: math.div(15px, $base-font-size-px) + rem;
+        margin-left: math.div(-15px, $base-font-size-px) + rem;
+        margin-right: math.div(-15px, $base-font-size-px) + rem;
         background: var(--gray-5);
         border-bottom: 1px solid var(--gray-40);
       }
@@ -58,8 +58,10 @@
     // Tablet only.
     @include respond-to-range($bp-sm-min, $bp-sm-max) {
       &__breadcrumbs {
-        padding-left: math.div(15px, $base-font-size-px) + rem;
-        padding-right: math.div(15px, $base-font-size-px) + rem;
+        padding-left: math.div(30px, $base-font-size-px) + rem;
+        padding-right: math.div(30px, $base-font-size-px) + rem;
+        margin-left: math.div(-30px, $base-font-size-px) + rem;
+        margin-right: math.div(-30px, $base-font-size-px) + rem;
       }
     }
 
@@ -100,11 +102,6 @@
     }
   }
 
-  // Modifier to allow breadcrumbs on full-width layouts, as in TCCP
-  .u-layout-grid--full-width-breadcrumbs {
-    overflow-x: hidden;
-  }
-
   // Set default line width.
   .u-layout-grid__main,
   .u-layout-grid__content-intro {