Header image max height on mobile

I see that I can set Header max height for screens > 1199px and screens > 1024px. Is there any way to set the Header max height for mobile screens? I’ve set it to 300 which is what I want for the desktop browser, but on a mobile and tablets I’m seeing more of the image than I want.

http://www.rosstartell.com/

Thanks.

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .has-banner, 
      .has-banner:after {
          max-height: 300px !important;
      }
    }

    @media only screen and (max-width: 700px) {
      .has-banner, 
      .has-banner:after {
          max-height: 230px !important;
      }
    }

    @media only screen and (max-width: 500px) {
      .has-banner, 
      .has-banner:after {
          max-height: 160px !important;
      }
    } 

Regards,
Kharis

Thanks, that worked!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

1 Like