Make image card elements stack on mobile

AshGDS · AshGDS · commit 3719992728a5 · 2026-02-19T11:14:39.000Z
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss b/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss
@@ -13,7 +13,7 @@
   @include govuk-text-colour;
 
   @include govuk-media-query($until: tablet) {
-    flex-direction: row-reverse;
+    flex-direction: column-reverse;
     gap: govuk-spacing(3);
   }
 }
@@ -39,8 +39,17 @@
   width: 100%;
   border: 0;
   border-top: 1px solid $govuk-border-colour;
+
+  @include govuk-media-query($until: tablet) {
+    max-width: 320px;
+  }
 }
 
+.gem-c-image-card--large .gem-c-image-card__image {
+  @include govuk-media-query($until: tablet) {
+    max-width: 100%;
+  }
+}
 .gem-c-image-card__title {
   margin: 0;
 }
@@ -142,7 +151,7 @@
     border-top: none;
   }
 
-  @include govuk-media-query($until: "mobile") {
+  @include govuk-media-query($until: mobile) {
     flex-direction: column-reverse;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`@include govuk-text-colour;`
`14`	`14`
`15`	`15`	`@include govuk-media-query($until: tablet) {`
`16`		`- flex-direction: row-reverse;`
	`16`	`+ flex-direction: column-reverse;`
`17`	`17`	`gap: govuk-spacing(3);`
`18`	`18`	`}`
`19`	`19`	`}`
`@@ -39,8 +39,17 @@`
`39`	`39`	`width: 100%;`
`40`	`40`	`border: 0;`
`41`	`41`	`border-top: 1px solid $govuk-border-colour;`
	`42`	`+`
	`43`	`+ @include govuk-media-query($until: tablet) {`
	`44`	`+ max-width: 320px;`
	`45`	`+ }`
`42`	`46`	`}`
`43`	`47`
	`48`	`+.gem-c-image-card--large .gem-c-image-card__image {`
	`49`	`+ @include govuk-media-query($until: tablet) {`
	`50`	`+ max-width: 100%;`
	`51`	`+ }`
	`52`	`+}`
`44`	`53`	`.gem-c-image-card__title {`
`45`	`54`	`margin: 0;`
`46`	`55`	`}`
`@@ -142,7 +151,7 @@`
`142`	`151`	`border-top: none;`
`143`	`152`	`}`
`144`	`153`
`145`		`- @include govuk-media-query($until: "mobile") {`
	`154`	`+ @include govuk-media-query($until: mobile) {`
`146`	`155`	`flex-direction: column-reverse;`
`147`	`156`	`}`
`148`	`157`	`}`