diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss index 5e3683eba3..c774d7aa66 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss @@ -18,7 +18,6 @@ $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; } @@ -26,18 +25,27 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey"); .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);