Remove extra whitespace in a few mobile screens

GSA-TTS · Nov 7, 2024 · c6d216a · c6d216a
1 parent 51638d8
commit c6d216a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/_includes/components/updates/card_subscribe.njk b/src/_includes/components/updates/card_subscribe.njk
@@ -12,7 +12,7 @@
     <div class="display-flex flex-column flex-align-self-stretch flex-align-start">
       <div class="display-inline-flex flex-align-self-stretch flex-justify-start flex-align-start">
         {% include 'components/updates/icon_grantees_auditors.njk' %}
-        <div class="padding-left-1 maxw-card">
+        <div class="padding-left-1 width-card-lg tablet:width-card">
           <div class="font-sans-sm text-bold">
             Grantees and auditors
           </div>
@@ -25,7 +25,7 @@
       </div>
       <div class="padding-top-3 display-inline-flex flex-align-self-stretch flex-justify-start flex-align-start">
         {% include 'components/updates/icon_agencies.njk' %}
-        <div class="padding-left-1 maxw-card">
+        <div class="padding-left-1 width-card-lg tablet:width-card">
           <div class="font-sans-sm text-bold">
             Federal awarding agencies
           </div>

diff --git a/src/updates/index.njk b/src/updates/index.njk
@@ -42,7 +42,9 @@ pagination:
                 <img src="{{config.baseUrl}}{{post.data.image_path}}" width=80 height=60 style="border: 1px solid #555;" alt="{{post.data.image_caption}}"/>
               {% endif %}
 
-              <div class="grid-col-9 tablet:grid-col-10 padding-left-2">
+              {# If there's an image, we want this div slightly smaller. #}
+              <div class="{% if post.data.image_path %} grid-col-9 {% endif %}
+                          tablet:grid-col-10 padding-left-2">
                 <a class="usa-link font-sans-md text-bold" href="{{ config.baseUrl }}updates/{{ post.fileSlug | slugify }}/">
                   {% if post.data.title %}
                     {{ post.data.title }}

diff --git a/src/updates/updates-layout.njk b/src/updates/updates-layout.njk
@@ -31,7 +31,7 @@ eleventyComputed:
 
     {# Image and caption, if they exist. #}
     {% if post.data.image_path and post.data.image_alt %}
-      <div class="float-right width-mobile margin-left-3 margin-bottom-3">
+      <div class="float-right width-full tablet:width-mobile margin-left-3 margin-bottom-3">
         <img class="cursor-pointer" src="{{config.baseUrl}}{{post.data.image_path}}" style="border: 1px solid #555;" alt="{{post.data.image_alt}}" aria-controls="image-modal" data-open-modal/>
         {% if post.data.image_caption%}
           <p class="text-italic text-primary font-sans-sm margin-bottom-0 margin-top-1">{{post.data.image_caption | safe}}</p>