Mobile header image is bigger than desktop

Hello… You helped me so much on the last image that i but now its the other way around. My mobile image is bigger than desktop.

You gave me css code to fix it the last time. Is there code for this?

Hello there,

Try enabling responsive header by going to Appearance > Customize > Header area > Header Slider; scroll down until you get the options labelled as “Slider mobile behavior” and select Responsive. After saving, you should flush cache (if applied).

Regards,
Kharis

I want to keep it full screen. Is there css code that will reduce the size of the image just on mobile?

Hello there,

You’d need to alter the larger slide image with smaller ones specifically designed to fit in smaller screen. Design your images and then upload them to the media library (Dashboard > Media). Then use this CSS code to call them:

    @media only screen and (max-width: 600px) {
      
      .header-slider .slide-item:nth-of-type(1) {
        backround-image: url('http://caninepro.net/path/to/your/mobile-slide-image-1') !important;
      }
     
      .header-slider .slide-item:nth-of-type(2) {
        backround-image: url('http://caninepro.net/path/to/your/mobile-slide-image-2') !important;
      }  
      
      .header-slider .slide-item:nth-of-type(3) {
        backround-image: url('http://caninepro.net/path/to/your/mobile-slide-image-3') !important;
      }  
      
    } 

Regards,
Kharis