Adds width to image blocks to prevent collapse with flexbox

[spencerldixon]

Trello card

https://trello.com/c/Jd9HvLCS/6811-phase-5-repurpose-navigation-component-for-life-as-a-teacher-section?filter=member:spencerldixon

Context

When collapsing the page between tablet and mobile breakpoints, the content overlaps the footer.

Changes proposed in this pull request

• Adds width to image-blocks class to ensure that when they collapse they do not overflow

[github-actions]

Review app deployed to https://get-into-teaching-app-review-4430.test.teacherservices.cloud

[sonarqubecloud]

Quality Gate passed

Issues
12 New issues
10 Accepted issues

Measures
0 Security Hotspots
95.7% Coverage on New Code
0.3% Duplication on New Code

See analysis details on SonarQube Cloud

[gemmadallmandfe]

@spencerldixon This looks better from an initial look at the review app but I think we should probably hold fire and deploy post code freeze so we can do a proper test

In the meantime, can you confirm which other components are affected by this styling change?

I've looked at the nav directory, the home page (directory and CTA blocks), the callback completion page (can't test events completion page as no event to test with!) and the 404 page - plus looked at various other template pages on the site

@jenhadfield-dfe @martyn-w Can you also review (but for deploy on 2 Jan!)

[spencerldixon]

@gemmadallmandfe this fix is scoped to image-blocks only so shouldn't affect anything except the blocks on the homepage and the life as a teacher page.

[jenhadfield-dfe]

looks good to me

[gemmadallmandfe]

Looks good to me

[martyn-w]

On wide screens the image blocks overflow the righthand margin. Is this OK?

[jenhadfield-dfe]

On wide screens the image blocks overflow the righthand margin. Is this OK?

doesn't do this for me on chrome, is it displaying differently in different browsers?

[gemmadallmandfe]

I can replicate this in Chrome