Thanks for the link Mike, it helps a lot because I noticed there are a few things out of place, such as the shadow on either side of the content column is not where it should be. After looking at the source code, it appears the header was set with a specific height:
#masthead{
max-height:450px;
}
Removing that will solve that one issue.
The pixelated image on the other page is lloading this:
<img src="https://www.mikebird.uk/wp-content/uploads/2019/03/Nailsea-wide-banner-2-1010x173.jpg" alt="About Nailsea">
But the one on the front page is loading this:
<img src="https://www.mikebird.uk/wp-content/uploads/2019/03/Nailsea-wide-banner-2.jpg" height="828" width="4823" alt="Mike Bird">
Notice the two different image sizes? The first one is an image file named Nailsea-wide-banner-2-1010×173.jpg while the other is Nailsea-wide-banner-2.jpg
The theme is coded to make sure any image at the top is covering the area, regardless of the browser window size. So what is happening, the smaller image being used is getting stretched more, hence the blurry pixelated effect.
You will want to make sure that the inner page(s) is using the same image as the front page.
For the orange header, you need to add an image to the “Featured Image” box in the editor when you have that page open in it. That will cover the area. If some pages have Featured Images while others don’t, the default colour background shows.
