Make attachment thumbnails smaller on mobile

alphagov · Mar 5, 2025 · 4eeebe3 · 4eeebe3
1 parent b11a608
commit 4eeebe3
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
@@ -18,26 +18,34 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
 .gem-c-attachment__thumbnail {
   position: relative;
   width: auto;
-  margin-right: govuk-spacing(5);
   padding: $thumbnail-border-width;
   float: left;
 }
 
 .gem-c-attachment__thumbnail-image {
   display: block;
   width: auto; // for IE8
-  max-width: $thumbnail-width;
-  height: $thumbnail-height;
+  max-width: calc($thumbnail-width / 1.5);
+  height: calc($thumbnail-height / 1.5);
   border: $thumbnail-border-colour; // for IE9 & IE10
   outline: $thumbnail-border-width solid $thumbnail-border-colour;
   background: $thumbnail-background;
   box-shadow: $thumbnail-shadow-width $thumbnail-shadow-colour;
   fill: $thumbnail-icon-border-colour;
   stroke: $thumbnail-icon-border-colour;
+
+  @include govuk-media-query($from: tablet) {
+    max-width: $thumbnail-width;
+    height: $thumbnail-height;
+  }
 }
 
 .gem-c-attachment__details {
-  padding-left: $thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5);
+  padding-left: calc(($thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5)) / 1.5);
+
+  @include govuk-media-query($from: tablet) {
+    padding-left: $thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5);
+  }
 
   .gem-c-details {
     margin-top: govuk-spacing(3);