Css

Some CSS that helps on mobile perhaps. This is a bit of a mess. Worked out with the help of claude.ai too quite lot of back and forth so there are probleay a lot of things to tidy up.

Hopefully this make the header image on the main page behave the same ways as the other pages and not as a hero image.

	@media screen and (max-width: 767px) {



			.has-header-image .custom-header-media {
					position: relative !important;
					height: auto !important;
					min-height: 0 !important;
			}

			.has-header-image .custom-header-media img {
					position: relative !important;
					width: 100% !important;
					height: auto !important;
					max-height: none !important;
					transform: none !important;
					top: auto !important;
					left: auto !important;
					object-fit: unset !important;
					object-position: unset !important;
			}

			/* Pull the site header back into normal flow */
			.has-header-image .site-header {
					position: relative !important;
					height: auto !important;
					min-height: 0 !important;
			}
		.site-title a, .site-title{
					color:black !important;
		}
			/* Reposition the title/tagline from absolute to normal flow */
			.has-header-image .site-branding {

					position: relative !important;
					bottom: auto !important;
					left: auto !important;
					width: 100vw !important;
					padding: 1em !important;
			}

			/* Remove the white space the JS leaves in the page flow */
			.has-header-image .custom-header {
					height: auto !important;
					min-height: 0 !important;
					position: relative !important;
			}
	}

	 @media screen and (max-width: 767px) {
			.has-header-image .site-header .wrap {
					display: block !important;
					width: 100% !important;
					padding: 0 !important;
					margin: 0 !important;
			}
	}
	@media screen and (max-width: 767px) {
			.has-header-image .site-branding-text {
					display: block !important;
					width: 100% !important;
			}
	}

	@media screen and (max-width: 767px) {
			.has-header-image .site-branding {
					width: 100vw !important;
					animation: resetWidth 0s forwards;
			}

			@keyframes resetWidth {
					to { width: 100vw; }
			}
	}
	@media screen and (max-width: 767px) {
			.has-header-image .site-branding {
					margin-right: calc(320px - 100vw) !important;
			}
	}

@media screen and (max-width: 767px) {
    .has-header-image.twentyseventeen-front-page .site-branding,
    .has-header-video.twentyseventeen-front-page .site-branding,
    .has-header-image.home.blog .site-branding,
    .has-header-video.home.blog .site-branding {
        display: block !important;
        height: auto !important;
        vertical-align: unset !important;
        width: 100% !important;
    }
}