Slider image fit

on iOS safari the images fit perfectly as they should. whichever browser I’m testing on macOS, it is not the same. the center of the image should be in the center of the screen.

URL to my website: https://worship4.live

I tried this, but it doesn’t change it:

    #slideshow .slides-container .slide-item {
      background: no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

Any ideas?

Best,
Markus

the iOS device I’m using is an iPad Pro, big screen (not an iPhone :wink: )

Hello there,

Try enabling responsive slider option. This can be done by going to Appearance > Customize > Header area > Header Slider; scroll down until you get the section that says “Slider mobile behavior”, and choose Responsive. Update.

Regards,
Kharis

Dear Kharis,

thank you. This causes now a new issue on mobile devices, as the header now overlaps the slider. I searched lots of posts and tried several css snippets to fix it, but it didn’t work.

Any ideas?

Cheers,
Markus

This is a result of fixed header bar on smaller screen. To avoid such this issue, try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .sydney-hero-area {
        margin-top: 80px;
      }
    }

    @media only screen and (max-width: 767px) {
      .sydney-hero-area {
        margin-top: 123px;
      }  
    }

Regards,
Kharis

it works for firefox on ios, but unfortunately not for safari.

or with other words: if i set it correctly for ios safari there is a space now with firefox between slider and header.

Hello there,

Remove the previous code I’ve suggested. And use this one:

@media only screen and (max-width: 1024px) {
  .site-header:not(.float-header) {
    position: static !important;
  }
}

Let me know how it goes.

Regards,
Kharis

what can I say? that unfortunately makes it worse