When on mobile screen sizes, the coloured background divs that display correctly on larger screen sizes do not show as expected, instead only the plain primary background colour.
Action To Take
Attempt to change the positioning of the divs to see if there is any difference.
After playing about with the positioning and sizes, I realised the background was actually displaying but the blur was set too high to visibly see them. After reducing the blur on mobile screens, the backgrounds are now displaying as expected.
Action To Take