thanks for this, I have a few bits of code now and they probably seem to be cancelling each other out. Apologies for being a pest this is not my strong point. I also wonder if there is some additional code to allow the menu navigation to have a white background rather than a transparent one with the new full sized intro image. Pasting all code here for you. Appreciate all your help

@media screen and (max-width: 1023px){
.site-logo img{
max-width: 60%;
}
}
}
@media screen and (min-width: 767px){
#introduction-section .featured-image:before {
background-color: transparent;
}
@media screen and (min-width: 767px) {

#introduction-section .entry-title {
font-size: 48px;
}
}
html,
body {
overflow-x: hidden;
}

sorry, I probably didn’t explain very well, yes the image used for the introduction section. Can this image to be the full width of the site (like a slider – but can be one static image if need be) rather than just a right aligned image. If I put a bigger image up will it just resize it?

Thanks for this, this helped a lot, but if i remove the introduction on the homepage the header logo is still cut into on the mobile version.