Non responsive header image

Hi there,

I’m building a site for some friends at https://www.doctorsrepresent.com. The header (slider) image looks great on desktop but on mobile, while the rest of the site renders for mobile in portrait mode, the header image doesn’t resize for portrait mode. Landscape works fine.

I’ve tried smaller image sizes, which hasn’t helped.

I edited styles.css to this which hasn’t helped:

@media only screen and (min-width: 480px) {
                .roll-project.fullwidth .project-item {
                        max-width: 100%;
                }

i’ve also added this to the styles.css file but it also hasn’t fixed the issue.

@media screen and (min-width: 320px){
        .header-slider {
         height: 275px !important;
        max-width: 100%;
  }
}

        @media screen and (min-width: 480px){
        .header-slider {
         height: 275px !important;
        max-width: 100%;
  }
}

        @media screen and (min-width: 768px){
        .header-slider {
        height: 650px !important;
        max-width: 100%;
  }
}

Currently running the most up to date theme on up to date wordpress. If you could provide any advice it would be greatly appreciated!

Thanks,
David