Make image display smaller on mobile

2026-07-15 19:01:04 -04:00 · 2021-05-28 13:52:20 +01:00
parent 68e7d2916e
commit 268a7d1881
2 changed files with 11 additions and 1 deletions
--- a/app/assets/stylesheets/views/webauthn.scss
+++ b/app/assets/stylesheets/views/webauthn.scss
@@ -23,3 +23,13 @@
    display: block;
  }
 }
+
+.webauthn-illustration {
+
+  @include media-down(mobile) {
+    margin: govuk-spacing(6) govuk-spacing(9) 0 govuk-spacing(9);
+  }
+
+  margin: govuk-spacing(9) auto 0 auto;
+
+}
--- a/app/templates/views/user-profile/security-keys.html
+++ b/app/templates/views/user-profile/security-keys.html
@@ -80,7 +80,7 @@
        }) }}
      </div>
      <div class="govuk-grid-column-one-quarter">
-        <img src="{{ asset_url('images/security-key.svg') }}" alt="" class="govuk-!-margin-top-9">
+        <img src="{{ asset_url('images/security-key.svg') }}" alt="" class="webauthn-illustration">
      </div>
      {% endif %}
    </div>