Style organisation logos with inline-block instead of flexbox

[AshGDS]

What / Why

• On HTML publications such as https://www.gov.uk/government/publications/dvsa-sustainability-strategy/dvsa-sustainability-strategy, if you resize down to mobile, the organisation logo's name will wrap the text when it does not need to
• This is because of flex-basis: 25%, which restricts the width of the logo
• It seems like this flex-basis exists because some publications have more than one organisation logo on the page. For example: https://www.gov.uk/government/publications/10-downing-street-correspondence-communications-gifts-and-hospitality-privacy-notice/10-downing-street-correspondence-communications-gifts-and-hospitality-privacy-notice
• It seems like flex-basis is only needed on desktop, since the logos will stack on tablet / mobile. Therefore I have wrapped the flex-basis in a desktop-only media query.
• I have also increased the flex-basis to 30%, as the Prime Minister's Office text was still wrapping while the screen size was within our desktop width boundary.

Visual Changes

Before (one logo example)

After (one logo example)

Before (multiple logo example)

After (multiple logo example)

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

[MartinJJones]

The change looks good to me overall, I like the approach of removing flex-basis from mobile and tablet, and wonder if it would be best to remove flex-basis from desktop as well. This would help keep the layout consistent across all screen sizes.

Non-blocking, but could also remove min-width and increase the margin-right to 30px to it still looks similar on desktop, and matches spacing between used on existing columns, something like that below for example:

.organisation-logos__logo {
  padding-bottom: govuk-spacing(3);
  margin-right: govuk-spacing(6);
}

[AshGDS]

Thanks @MartinJJones - was just thinking about removing flex-basis on desktop, if that's the case do you think it's worth removing display: flex entirely, and then just adding display: inline-block on the logos themselves so that they sit next to each other and then stack?

Good idea with the padding-bottom: and margin-right: - i'll use that 👍

[MartinJJones]

was just thinking about removing flex-basis on desktop, if that's the case do you think it's worth removing display: flex entirely, and then just adding display: inline-block on the logos themselves so that they sit next to each other and then stack

I like this idea 👍

Looking at the existing code it looks like flex is used to try and create a 4 column layout, using flex-basis: 25% but this will only ever result is a max of 3 logos per row, because the margin-right: 15px increases it beyond the 25% width. This can be fixed, but will still likely result in more work to try and avoid the original issue.

So going with an option to let the logos always take up the space needed and have consistent spacing between them sounds like a good option to me.

[AshGDS]

Thanks @MartinJJones - i've made those changes. Here are the updated visual changes:

Before

After

Before

After

[MartinJJones]

Nice work, looks like a nice improvement, especially the examples on mobile as well 👍