Skip to content

Comments

[DO NOT MERGE] Make image card elements stack on mobile#5287

Draft
AshGDS wants to merge 1 commit intomainfrom
PNP-9811
Draft

[DO NOT MERGE] Make image card elements stack on mobile#5287
AshGDS wants to merge 1 commit intomainfrom
PNP-9811

Conversation

@AshGDS
Copy link
Contributor

@AshGDS AshGDS commented Feb 19, 2026

What/Why

Visual Changes

Before After
Narrow mobile width image image
Wide mobile width image image

@AshGDS AshGDS changed the title Make image card elements stack on mobile [DO NOT MERGE] Make image card elements stack on mobile Feb 19, 2026
Copy link

@nnagewad nnagewad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great on mobile. What does it look like on Desktop?

@AshGDS
Copy link
Contributor Author

AshGDS commented Feb 20, 2026

@nnagewad There should be no visual changes, as the CSS change doesn't affect any of those styles 👍
image

border-top: 1px solid $govuk-border-colour;

@include govuk-media-query($until: tablet) {
max-width: 320px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to note that when a regular image card is next to a 'large version' on mobile (as happens on organisations pages) the layout looks a little inconsistent, below. What's the reason for restricting it to 320px?

Image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was mainly to preserve large looking distinctly large in this scenario, and also because full width takes up quite a lot of page height. Happy to change it if you think it shouldn't be like this though.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe worth checking with @nnagewad

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants